139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<template v-if="keys.length > 0">
|
|
<div
|
|
class="field is-horizontal"
|
|
v-for="(v, i) in keys"
|
|
:key="i"
|
|
>
|
|
<div class="field-body">
|
|
<div class="field is-narrow">
|
|
<div class="control">
|
|
<input
|
|
class="input fs-14"
|
|
type="text"
|
|
placeholder=""
|
|
v-model="keys[i]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<input
|
|
class="input fs-14"
|
|
type="text"
|
|
placeholder=""
|
|
v-model="values[i]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field is-narrow has-addons">
|
|
<p class="control">
|
|
<button
|
|
class="button is-primary is-light"
|
|
@click="jsonData(v, i)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:app-registration-rounded"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button
|
|
class="button is-primary is-light"
|
|
@click="remove(i)"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<button
|
|
class="button is-success is-light"
|
|
@click="addAttr()"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:add-rounded"
|
|
:size="20"
|
|
/>
|
|
</span>
|
|
<span>Thêm thuộc tính</span>
|
|
</button>
|
|
<div class="mt-2">
|
|
<button
|
|
class="button is-primary"
|
|
@click="update()"
|
|
>
|
|
Cập nhật
|
|
</button>
|
|
</div>
|
|
<Modal
|
|
@close="comp = undefined"
|
|
@update="doUpdate"
|
|
v-bind="{ component: comp, width: '40%', height: '300px', vbind: vbind }"
|
|
v-if="comp"
|
|
></Modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["field", "close"],
|
|
data() {
|
|
return {
|
|
keys: [],
|
|
values: [],
|
|
comp: undefined,
|
|
vbind: undefined,
|
|
current: undefined,
|
|
};
|
|
},
|
|
created() {
|
|
Object.keys(this.field).map((v) => {
|
|
this.keys.push(v);
|
|
this.values.push(this.field[v]);
|
|
});
|
|
},
|
|
methods: {
|
|
doUpdate(v) {
|
|
this.values[this.current.i] = v;
|
|
},
|
|
jsonData(v, i) {
|
|
this.current = { v: v, i: i };
|
|
this.vbind = {
|
|
field: this.$empty(this.values[i]) || typeof this.values[i] === "string" ? {} : this.values[i],
|
|
close: true,
|
|
};
|
|
this.comp = "datatable/FieldAttribute";
|
|
},
|
|
addAttr() {
|
|
this.keys.push(undefined);
|
|
this.values.push(undefined);
|
|
},
|
|
remove(i) {
|
|
this.$remove(this.keys, i);
|
|
this.$remove(this.values, i);
|
|
},
|
|
update() {
|
|
let obj = {};
|
|
this.keys.map((v, i) => {
|
|
if (!this.$empty(v)) obj[v] = v.indexOf("__in") > 0 ? this.values[i].split(",") : this.values[i];
|
|
});
|
|
this.$emit("update", obj);
|
|
this.$emit("modalevent", { name: "update", data: obj });
|
|
if (this.close) this.$emit("close");
|
|
},
|
|
},
|
|
};
|
|
</script>
|