web/app/components/parameter/ImportSetting.vue

<template>
  <div class="columns">
    <div class="column is-3">
      <div class="field">
        <label class="label">Code</label>
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder=""
            v-model="current.code"
          />
        </div>
      </div>
      <div class="field mt-4">
        <label class="label">Name</label>
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder=""
            v-model="current.name"
          />
        </div>
      </div>
      <div class="field mt-4">
        <label class="label">Api</label>
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder=""
            v-model="current.api"
          />
        </div>
      </div>
      <div class="mt-5 py-2 border-bottom">
        <a @click="updateFromModel()">Thêm cài đặt cột từ Model</a>
      </div>
      <div class="py-2 border-bottom">
        <a @click="createUserSetting()">Tạo thiết lập (user setting)</a>
      </div>
      <div class="buttons mt-5">
        <button
          class="button is-primary"
          @click="saveData()"
        >
          Lưu lại
        </button>
      </div>
    </div>
    <div class="column is-5">
      <DataTable
        v-bind="{ pagename: pagename1 }"
        @delete="remove"
        @open="showAttr()"
        v-if="pagedata1"
      />
    </div>
    <div class="column is-4">
      <DataTable
        v-bind="{ pagename: pagename2 }"
        v-if="pagedata2"
      />
    </div>
  </div>
  <Modal
    @close="showmodal = undefined"
    @update="updateAttr"
    v-bind="showmodal"
    v-if="showmodal"
  />
</template>
<script>
export default {
  props: ["row"],
  data() {
    return {
      data: [],
      current: {},
      showmodal: undefined,
      report: undefined,
      setting: {},
      pagename: "page0",
      pagename1: "page1",
      pagename2: "page2",
      pagename3: "page3",
    };
  },
  async created() {
    let conn1 = this.$findapi("usersetting");
    conn1.params.filter = { name__in: ["import-setting", "model-fields"] };
    let rs = await this.$getapi([conn1]);
    let obj = this.$find(rs, { name: "usersetting" });
    let found = this.$find(obj.data.rows, { name: "import-setting" });
    this.pagedata1 = this.$getpage();
    this.$setpage(this.pagename1, found);
    this.pagedata2 = this.$getpage();
    found = this.$find(obj.data.rows, { name: "model-fields" });
    this.$setpage(this.pagename2, found);
    this.doClick(this.row);
  },
  computed: {
    pagedata1: {
      get: function () {
        return this.$store[this.pagename1];
      },
      set: function (val) {
        this.$store.commit(this.pagename1, val);
      },
    },
    pagedata2: {
      get: function () {
        return this.$store[this.pagename2];
      },
      set: function (val) {
        this.$store.commit(this.pagename2, val);
      },
    },
    pagedata3: {
      get: function () {
        return this.$store[this.pagename3];
      },
      set: function (val) {
        this.$store.commit(this.pagename3, val);
      },
    },
  },
  methods: {
    updateAttr(v) {
      this.current.detail = v;
      this.showSetting();
      this.showmodal = undefined;
    },
    createUserSetting() {
      this.pagedata3 = this.$getpage();
      let fields = [];
      let arr = ["AutoField", "ForeignKey", "FloatField", "IntegerField"];
      this.pagedata2.data.map((v) => {
        let field = this.$createField(
          v.name,
          v.name,
          arr.findIndex((x) => x == v.datatype) >= 0 ? "number" : "string",
          true,
          true,
        );
        fields.push(field);
      });
      this.$store.commit(this.pagename3, { update: { fields: fields } });
      this.showmodal = {
        component: "menu/MenuSave",
        title: "Lưu thiết lập",
        width: "600px",
        height: "auto",
        vbind: { pagename: this.pagename3, classify: 3 },
      };
    },
    remove(v) {
      let copy = this.$copy(this.current.detail);
      delete copy[v.key];
      this.current.detail = copy;
      this.doClick(this.current);
    },
    async insertData() {
      let copy = this.$copy(this.current);
      copy.id = undefined;
      let rs = await this.$insertrow("importsetting", copy, undefined, this.pagename);
    },
    async saveData() {
      if (!this.row) return this.insertData();
      let rs = await this.$updateapi("importsetting", this.current, undefined, this.pagename);
    },
    updateFromModel() {
      let filter = this.$filter(this.pagedata2.data, {
        datatype: ["FloatField", "IntegerField"],
      });
      let copy = this.$copy(this.current.detail);
      filter.map((v) => {
        copy[v.name] = { type: "number", empty: v.null ? "yes" : "no" };
      });
      this.current.detail = copy;
      this.showSetting();
    },
    showAttr() {
      this.showmodal = {
        component: "datatable/FieldAttribute",
        width: "40%",
        height: "300px",
        title: "Danh sách thuộc tính",
        vbind: { field: this.current.detail },
      };
    },
    async doClick(v) {
      this.current = this.$copy(v);
      this.showSetting();
      let found = this.$findapi(v.api);
      let conn = this.$findapi("modelfields");
      conn.url += found.url.replace("data/", "");
      let rs = await this.$getapi([conn]);
      let copy = this.$copy(this.pagedata2);
      copy.update = { data: rs[0].data };
      this.pagedata2 = copy;
    },
    showSetting() {
      let arr = [];
      let i = 0;
      for (let key in this.current.detail) {
        i += 1;
        arr.push({
          id: i,
          key: key,
          value: this.current.detail[key],
          text: JSON.stringify(this.current.detail[key]),
        });
      }
      let copy = this.$copy(this.pagedata1);
      copy.update = { data: arr };
      this.pagedata1 = copy;
    },
  },
};
</script>