kd-aiot-frontend/ele-admin-template/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="form.dictStaticSubmitPOList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center"> </el-table-column>
      <el-table-column prop="code" label="字典项编码">
        <template slot-scope="scope">
          <el-input 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>

    <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
    },
    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
          }
        ],
        // 表格选中数据
        selection: [],
        datasource: {
          list: []
        },

        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    created() {},
    methods: {
      pushArr() {},
      removeArr() {},
      handleSelectionChange() {},
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          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);
            });
        });
      },
      /* 更新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;
        // this.datasource.list = this.from.dictStaticSubmitPOList;
      }
    },
    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 };
        }
      }
    }
  };
</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>