drp-ui/src/views/system/table-template/add-dialog.vue

<script>
import { item, add } from "@/api/system/table-template";
export default {
  name: "AddDialog",
  data() {
    const dict = {
      status: [
        { label: "启用", value: "0" },
        { label: "停用", value: "2" },
      ],
    };
    const columns = [
      {
        type: "text",
        prop: "templateCode",
        label: "模板编码",
      },
      {
        type: "text",
        prop: "templateName",
        label: "模板名称",
      },
      {
        type: "text",
        prop: "desc",
        label: "描述",
      },
      {
        type: "text",
        prop: "remark",
        label: "备注",
      },
      {
        type: "select",
        prop: "status",
        label: "启用状态",
      },
      {
        type: "text",
        prop: "createBy",
        label: "创建者",
        disabled: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "createTime",
        label: "创建时间",
        disabled: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "updateBy",
        label: "更新者",
        disabled: true,
        readonly: true,
      },
      {
        type: "text",
        prop: "updateTime",
        label: "更新时间",
        disabled: true,
        readonly: true,
      },
    ];
    const initDict = () => dict;
    const initColumns = () => columns;
    const initForm = () => {
      let form = { sysTemplateItemList: [] };
      initColumns().forEach((item) => (form[item.prop] = ""));
      return form;
    };
    return {
      loading: false,
      dialogFormVisible: false,
      form: initForm(),
      columns: initColumns(),
      dict: initDict(),
    };
  },
  methods: {
    //
    fetchItem(prop) {
      let { id } = prop;
      this.loading = true;
      this.dialogFormVisible = true;
      item(id)
        .then((res) => {
          let { data } = res;
          this.form = data;
          this.form.sysTemplateItemList = data.sysTemplateItemList.map(
            (item) => ({
              ...item,
              isEdit: item.isEdit === "1" ? true : false,
              isShow: item.isShow === "1" ? true : false,
              isRequired: item.isRequired === "1" ? true : false,
            })
          );
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //
    onAddRow() {
      this.form.sysTemplateItemList.push({
        id: "",
        isEdit: true,
        isShow: true,
        isRequired: true,
      });
    },
    //
    onMoveRow(index1, index2) {
      let swapArr = (arr, index1, index2) => {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      };
      this.form.sysTemplateItemList = swapArr(
        this.form.sysTemplateItemList,
        index1 - 1,
        index2
      );
    },
    //
    onRemoveRow(prop) {
      let { code } = prop;
      this.form.sysTemplateItemList = this.form.sysTemplateItemList.filter(
        (item) => item.code !== code
      );
    },
    //
    onSubmit() {
      this.loading = true;
      this.form.id = "";
      this.form.sysTemplateItemList = this.form.sysTemplateItemList.map(
        (item, index) => ({
          ...item,
          id: "",
          sort: String(index),
          isEdit: item.isEdit === true ? "1" : "0",
          isShow: item.isShow === true ? "1" : "0",
          isRequired: item.isRequired === true ? "1" : "0",
        })
      );
      add(this.form)
        .then((res) => {
          let { code } = res;
          if (code == 200) {
            this.dialogFormVisible = false;
            this.$message.success("新增成功");
            this.$parent.$children
              .find((el) => el.$vnode.tag.indexOf("SearchTable") > -1)
              .fetchList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  created() {},
};
</script>

<template>
  <el-dialog
    fullscreen
    destroy-on-close
    title="复制"
    width="75%"
    :visible.sync="dialogFormVisible"
  >
    <el-row v-loading="loading" :gutter="20">
      <el-form size="mini" :model="form" label-position="top">
        <el-col v-for="column in columns" :key="column.prop" :span="6">
          <el-form-item :label="column.label">
            <el-input
              v-if="column.type === 'text'"
              v-model="form[column.prop]"
              :disabled="column.disabled"
              :readonly="column.readonly"
            ></el-input>
            <el-select
              v-if="column.type === 'select'"
              v-model="form[column.prop]"
              style="width: 100%"
            >
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模板配置">
            <template #label>
              <span style="margin-right: 12px">模板配置</span>
              <el-button
                @click.native.prevent="onAddRow"
                icon="el-icon-plus"
                circle
              >
              </el-button>
            </template>
            <el-table height="450" :data="form.sysTemplateItemList">
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column prop="code" label="字段编码" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.code"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="字段名称" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="isEdit" label="是否编辑">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isEdit"> </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="isShow" label="是否显示">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isShow"> </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="isRequired" label="是否必填">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isRequired"> </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="conditionType"
                label="字段类型"
                width="200"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.conditionType"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="dictId" label="字典ID" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dictId"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="textAttribute"
                label="文本类型"
                width="200"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.textAttribute"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="checkRule" label="校验规则" width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.checkRule"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-popover
                    placement="left"
                    width="200"
                    trigger="click"
                    style="margin-right: 8px"
                  >
                    <el-input-number
                      v-model="scope.row.sort"
                      controls-position="right"
                      @change="onMoveRow($event, scope.$index)"
                      :min="1"
                      :max="form.sysTemplateItemList.length"
                    ></el-input-number>
                    <el-button
                      slot="reference"
                      icon="el-icon-watermelon"
                      circle
                    >
                    </el-button>
                  </el-popover>
                  <el-button
                    @click.native.prevent="onRemoveRow(scope.row)"
                    icon="el-icon-remove"
                    circle
                  >
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer">
      <el-button :disabled="loading" @click="dialogFormVisible = false"
        >取 消</el-button
      >
      <el-button type="primary" :disabled="loading" @click="onSubmit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<style scoped></style>