jintan-canlian-web/src/views/system/components/formFields.vue

<template>
  <div>
    <el-drawer
      ref="elDrawer"
      title="自定义字段"
      :visible.sync="isShow"
      size="49%"
      direction="rtl"
    >
      <template>
        <div class="btns">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            circle
            @click="$refs['xyTable'].getTableData(true)"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            circle
            @click="$refs['addField'].setForm(['custom_form_id'],[id]),$refs['addField'].setType('add'), $refs['addField'].show()"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            circle
          ></el-button>
        </div>
        <xy-table
          :delay-req="true"
          :auths="['delete','edit']"
          :action="index"
          :destroy-action="destroy"
          :req-opt="{
            custom_form_id: id
          }"
          ref="xyTable"
          :height="400"
          style="margin: 0 10px"
          :table-item="table"
          @editor="row => {
            $refs['addField'].setType('editor');
            $refs['addField'].setId(row.id);
            $refs['addField'].show();
          }"
          @destroyed="row => {
            update({ id })
          }"
        >
        </xy-table>
      </template>
    </el-drawer>

    <addField
      :z-index="zIndex"
      ref="addField"
      @refresh="refreshCallback"
    ></addField>
  </div>
</template>

<script>
import { update } from "@/api/system/customForm"
import { index,destroy } from "@/api/system/customFormField";

import addField from "./addField.vue";
export default {
  components: {
    addField,
  },
  data() {
    return {
      zIndex: 2001,
      select: {
        custom_form_id: this.id
      },
      id: null,
      isShow: false,

      table: [
        {
          type: "index",
          width: 70,
          label: "编号",
        },
        {
          prop: "field",
          label: "字段标识",
          width: 120,
        },
        {
          prop: "name",
          label: "名字",
          width: 160,
        },
      ],
    };
  },
  methods: {
    index,destroy,update,
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
    refreshCallback() {
      this.$refs['xyTable'].getTableData()
      update({ id:this.id })
    }
  },
  computed: {},
  watch: {
    isShow: {
      handler: function (newVal) {
        if(newVal) {
          this.zIndex = Number(
            window
              .getComputedStyle(this.$refs["elDrawer"].$el)
              .getPropertyValue("z-index")
          )
            ? Number(
            window
              .getComputedStyle(this.$refs["elDrawer"].$el)
              .getPropertyValue("z-index")
          ) + 1
            : 2100;
          this.$nextTick(() => {
            this.$refs['xyTable'].getTableData(true);
          })
        }
      }
    }
  },
  mounted() {

  },
};
</script>

<style scoped lang="scss">
.btns {
  margin: 0 10px 12px 10px;
}
</style>