159 lines
3.6 KiB
JavaScript
159 lines
3.6 KiB
JavaScript
/**
|
|
* {}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/08/08 18:19:17
|
|
*/
|
|
import { html, css, Component, classMap, nextTick } from 'wkit'
|
|
|
|
import { noop } from '../utils/index.js'
|
|
|
|
class Records extends Component {
|
|
static styles = css`
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.thead {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.records {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
padding: 0 4px;
|
|
border-bottom: 1px solid var(--color-plain-2);
|
|
text-align: center;
|
|
}
|
|
.thead {
|
|
line-height: 40px;
|
|
}
|
|
.item span {
|
|
flex: 1;
|
|
}
|
|
.item .long {
|
|
flex: 1.5;
|
|
}
|
|
|
|
.item wc-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
--wc-input-border-color: transparent;
|
|
}
|
|
.item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
`
|
|
|
|
set scrollTop(val) {
|
|
this.$refs.records.scrollTop = val
|
|
}
|
|
|
|
// 同一个记录, 允许一条被激活
|
|
recordChanges(ev, item) {
|
|
let { tmp_records } = this.$store
|
|
|
|
item.enabled = ev.target.value
|
|
|
|
if (item.enabled) {
|
|
if (tmp_records[item.record].length > 1) {
|
|
for (let it of tmp_records[item.record]) {
|
|
if (it.value !== item.value) {
|
|
it.enabled = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
updateCacheDict(ev, item) {
|
|
let { records } = this.$store
|
|
let tmp_records = Object.create(null)
|
|
|
|
item.record = ev.target.value
|
|
|
|
for (let it of records) {
|
|
if (tmp_records[it.record]) {
|
|
tmp_records[it.record].push(it)
|
|
} else {
|
|
tmp_records[it.record] = [it]
|
|
}
|
|
}
|
|
this.$store.tmp_records = tmp_records
|
|
}
|
|
|
|
clone(item) {
|
|
let { tmp_records, records } = this.$store
|
|
var params = { ...item }
|
|
params.enabled = false
|
|
|
|
records.push(params)
|
|
tmp_records[params.record].push(records.at(-1))
|
|
|
|
nextTick(_ => (this.$refs.records.scrollTop = 1e6))
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<header class="thead item">
|
|
<span>主机记录</span>
|
|
<span>类型</span>
|
|
<span class="long">记录值</span>
|
|
<span>操作</span>
|
|
<span>备注</span>
|
|
</header>
|
|
<wc-scroll class="records" ref="records">
|
|
${this.$store.records.map(
|
|
(it, i) => html`
|
|
<div class="item">
|
|
<wc-input
|
|
size="m"
|
|
autofocus
|
|
@change=${ev => this.updateCacheDict(ev, it)}
|
|
:value=${it.record}
|
|
label="根域请填 @"
|
|
></wc-input>
|
|
<span>A</span>
|
|
<wc-input
|
|
size="m"
|
|
class="long"
|
|
:value=${it.value}
|
|
@change=${ev => (it.value = ev.target.value)}
|
|
label="请填写IP"
|
|
></wc-input>
|
|
<wc-space gap="s">
|
|
<wc-link
|
|
size="m"
|
|
type="danger"
|
|
@click=${ev => this.$store.records.splice(i, 1)}
|
|
>删除</wc-link
|
|
>
|
|
<wc-link size="m" type="info" @click=${ev => this.clone(it)}
|
|
>克隆</wc-link
|
|
>
|
|
<wc-switch
|
|
size="m"
|
|
:value=${it.enabled}
|
|
@change=${ev => this.recordChanges(ev, it)}
|
|
></wc-switch>
|
|
</wc-space>
|
|
<wc-input size="m" no-border :value=${it.remark}></wc-input>
|
|
</div>
|
|
`
|
|
)}
|
|
</wc-scroll>
|
|
`
|
|
}
|
|
}
|
|
|
|
Records.reg('records')
|