kd-aiot-frontend/src/views/system/dictionary/components/dict-edit.vue

<!-- 字典编辑弹窗 -->
<template>
  <ele-modal
    width="800px"
    :maxable="true"
    :visible="visible"
    :close-on-click-modal="true"
    :title="isUpdate ? '修改字典' : '添加字典'"
    @update:visible="updateVisible"
  >
    <div class="divider">
      <div class="title">
        <div class="ele-bg-primary"></div>
        <span>基本信息</span>
      </div>
      <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
    </div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="85px"
      style="margin-bottom: 10px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="字典名称:" prop="name">
            <el-input
              clearable
              :disabled="isUpdate"
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入字典名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字典值:" prop="code">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.code"
              placeholder="请输入字典值"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用类型:" prop="appType">
            <el-radio-group v-model="form.appType">
              <el-radio :label="1">业务字典</el-radio>
              <el-radio :label="2">数据字典</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用:" prop="enable">
            <el-radio-group v-model="form.enable">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="排序号:" prop="sortNumber">
            <el-input-number
              :min="0"
              :max="9999"
              v-model="form.sortNumber"
              controls-position="right"
              placeholder="请输入排序号"
              class="ele-fluid ele-text-left"
            />
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="备注:">
            <el-input
              :rows="4"
              type="textarea"
              :maxlength="200"
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="divider">
      <div class="title">
        <div class="ele-bg-primary"></div>
        <span>字典项配置</span>
      </div>
      <div class="ele-bg-primary" style="width: 100%; height: 2px"></div>
    </div>
    <div style="margin: 5px 0">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        class="ele-btn-icon"
        @click="pushArr"
      >
        添加
      </el-button>

      <!-- <el-button
        size="small"
        type="danger"
        icon="el-icon-delete"
        class="ele-btn-icon"
        @click="removeArr"
      >
        删除
      </el-button> -->
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="code" label="字典项编码">
        <template slot-scope="scope">
          <el-input
            @blur="checkedValue(scope.row.code)"
            v-model="scope.row.code"
            placeholder=""
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="字典项名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sort"
            @input="
              scope.row.sort = String(scope.row.sort).replace(/[^\d]/g, '')
            "
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="启用">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.enable">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此字典项吗？"
            @confirm="removeArr(scope)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { addDictionary, updateDictionary } from '@/api/system/dictionary';
  import {
    pageDictionaryData,
    removeDictionaryData,
    removeDictionaryDataBatch
  } from '@/api/system/dictionary-data';

  export default {
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      id: String | Number
    },
    data() {
      const defaultForm = {
        name: '',
        code: '',
        appType: 1,
        enable: 1,
        remark: '',
        dictStaticSubmitPOList: []
      };
      return {
        defaultForm,
        // 表单数据
        form: { ...defaultForm },
        // form: {
        //   name: '',
        //   code: '',
        //   appType: 1,
        //   enable: 1,
        //   remark: ''
        // },
        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入字典名称',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入字典值',
              trigger: 'blur'
            }
          ],
          appType: [
            {
              required: true,
              message: '请选择应用类型',
              trigger: 'blur'
            }
          ],
          enable: [
            {
              required: true,
              message: '请选择是否启用',
              trigger: 'blur'
            }
          ],
          sort: [
            {
              required: true,
              message: '请输入排序号',
              trigger: 'blur'
            }
          ]
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '字典编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '字典名称',

            showOverflowTooltip: true
          },
          // {
          //   prop: 'appType',
          //   label: '字典类型',

          //   showOverflowTooltip: true,
          //   minWidth: 110
          // },
          {
            prop: 'appType',
            label: '应用类型',

            showOverflowTooltip: true
          },
          {
            prop: 'remark',
            label: '描述',

            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',

            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.$util.toDateString(cellValue);
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 130,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        tableData: [],
        // 表格选中数据
        selection: [],
        datasource: {
          list: []
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        delectId: 1
      };
    },
    created() {},

    methods: {
      pushArr() {
        this.form.dictStaticSubmitPOList.push({
          code: '',
          enable: 1,
          name: '',
          sort: '',
          delectId: this.delectId
        });
        this.delectId = this.delectId + 1;
        this.filterArr();
      },
      //
      checkedValue(val) {
        console.log(val);
      },
      removeArr(row) {
        console.log(row);
        if (row.row.id) {
          this.form.dictStaticSubmitPOList.forEach((item) => {
            if (item.id === row.row.id) {
              item.deleted = 1;
            }
          });
          this.filterArr();
        } else {
          let index = this.form.dictStaticSubmitPOList.findIndex(
            (item) => item.delectId === row.row.delectId
          );
          console.log(index);
          this.form.dictStaticSubmitPOList.splice(index, 1); // 在数组的指定位置移除对应的元素。 返回移除的
          this.filterArr();
        }

        // let falg = this.form.dictStaticSubmitPOList[row.$index].deleted === 0;
        // if (falg) {
        //   this.form.dictStaticSubmitPOList[row.$index].deleted = 1;
        //   this.filterArr();
        // } else {
        //   this.form.dictStaticSubmitPOList.splice(row.$index, 1);
        //   this.filterArr();
        // }
      },
      handleSelectionChange() {},
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          let falg = this.form.dictStaticSubmitPOList.some(
            (item, index) => item.code.length === 0
          );
          if (falg) {
            this.$message({
              message: '字典项编码不能为空',
              type: 'warning'
            });
            return;
          }
          this.loading = true;
          const saveOrUpdate = this.isUpdate ? updateDictionary : addDictionary;
          saveOrUpdate(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },
      filterArr() {
        this.tableData = this.form.dictStaticSubmitPOList.filter(
          (item) => item.deleted !== 1
        );
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },

      async getDetail() {
        const res = await pageDictionaryData(this.id);
        this.form = res.data.dictInfoVO;

        this.form.dictStaticSubmitPOList = res.data.dictStaticVOList;
        if (this.form.dictStaticSubmitPOList.length > 0) {
          this.filterArr();
        } else {
          this.tableTata = [];
        }
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.id) {
            // this.$util.assignObject(this.form, this.data);
            this.isUpdate = true;
            this.getDetail();
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm };
          this.form.dictStaticSubmitPOList = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后
          this.tableData = []; // clear the list of the dictionary static push button. 描述变化的字段不会在push后。
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .divider {
    margin-bottom: 20px;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      div {
        width: 8px;
        height: 20px;
        margin-right: 10px;
      }
      span {
        font-size: 20px;
      }
    }
  }
</style>