kd-aiot-frontend/src/views/codeManagement/businessCode/codeValueList.vue

<template>
  <el-tabs type="border-card">
    <el-tab-pane label="属性">
      <el-form ref="form" disabled label-width="82px">
        <el-row :gutter="15">
          <el-col :span="13">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="描述" prop="remark">
              <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="长度" prop="length">
              <el-input v-model="form.length"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="间隔符" prop="delimiter">
              <el-input v-model="form.delimiter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="粗规则" prop="roughRuleName">
              <el-input v-model="form.roughRuleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="细规则" prop="fineRuleName">
              <el-input v-model="form.fineRuleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="创建人" prop="createUserName">
              <el-input v-model="form.createUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="form.createTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="修改人" prop="updateUserName">
              <el-input v-model="form.updateUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="修改时间" prop="updateTime">
              <el-input v-model="form.updateTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="码值">
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="tableList"
        height="calc(100vh - 335px)"
        full-height="calc(100vh - 116px)"
        tool-class="ele-toolbar-form"
        cache-key="systemOrgUserTable"
        :needPage="false"
      >
        <template v-slot:action="scoped">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此码值吗？"
            @confirm="remove(scoped.$index)"
          >
            <template v-slot:reference>
              <el-button type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:value="{ row }">
          <el-input v-model="row.value" @change.native="valueChange(row)">
            <template slot="append" v-if="!isReg(row)">
              <img title="码值不符合规则" src="../../../assets/error.png" />
            </template>
          </el-input>
        </template>
        <template v-slot:remark="{ row }">
          <el-input v-model="row.remark" @change="valueChange(row)"></el-input>
        </template>
        <template v-slot:toolbar v-if="form.roughRule != 4">
          <el-button type="primary" @click.native="openEdit('add')">
            增加
          </el-button>
        </template>
      </ele-pro-table>
    </el-tab-pane>
  </el-tabs>
  <!-- 数据表格 -->
</template>

<script>
  import { roughRule, fineRule } from '@/enum/dict.js';
  import { saveSegment } from '@/api/businessCode';

  export default {
    props: {
      // 上级
      parentData: {
        type: Object,
        default: () => {}
      }
    },

    data() {
      return {
        form: {
          roughRuleName: '',
          fineRuleName: '',
          name: '', //码段名称
          businessCodeCategoryId: '', //分类id
          length: '', //长度
          delimiter: '', //间隔符
          roughRule: '', //粗规则
          fineRule: '', //细规则
          value: [],
          remark: '' //描述
        },
        tableList: [],
        // 表格列配置
        columns: []
      };
    },
    created() {},
    // watch: {
    //   parentData(){
    //     this.init()
    //   }
    // },
    methods: {
      reload() {
        this.form = JSON.parse(JSON.stringify(this.parentData));
        this.tableList = this.form.value;
        this.form['roughRuleName'] = roughRule.find(
          (item) => item.value == this.form.roughRule
        )?.label;
        let _fineRule = fineRule.filter(
          (item) => item.pid == this.form.roughRule
        );
        this.form['fineRuleName'] = _fineRule.find(
          (item) => item.value == this.form.fineRule
        )?.label;
        this.setColumns();
      },
      setColumns() {
        this.columns = [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            label:
              '编码值' +
              '(规则：' +
              this.form.fineRuleName +
              '，长度：' +
              (this.form.length || '') +
              ')',
            prop: 'value',
            width: 240,
            slot: 'value',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'remark',
            slot: 'remark',
            label: '描述',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
      },
      valueChange(row) {
        console.log(this.isReg(row), 'this.isReg(row)');
        if (this.isReg(row)) {
          this.save();
        }
      },
      isReg(row) {
        if (this.form.roughRule == 6) {
          if (row.value.length == this.form.length) {
            return true;
          } else {
            return false;
          }
        }
        let _fineRule = fineRule.filter(
          (item) => item.pid == this.form.roughRule
        );
        let reg = _fineRule.find(
          (item) => item.value == this.form.fineRule
        )?.reg;
        let regexp = '/^' + reg + '{' + this.form.length + '}$/';
        return RegExp(eval(regexp)).test(row.value);
      },
      /* 显示编辑 */
      openEdit() {
        this.tableList.push({
          value: '',
          remark: ''
        });
      },
      /* 保存编辑 */
      save() {
        this.form.value = this.tableList;
        saveSegment(this.form)
          .then((msg) => {
            this.$message.success('操作成功');
            this.$emit('done', this.form);
          })
          .catch((e) => {
            this.loading = false;
          });
      },
      /* 删除 */
      remove(index) {
        this.tableList.splice(index, 1);
        this.save();
      },
      done() {
        this.$emit('done', this.parentData);
      }
    }
  };
</script>