dvcp_v2_webapp/project/xumu/AppDictionary/dictDetail.vue

<template>
  <section class="dictDetail">
    <ai-detail>
      <ai-title slot="title" title="字典信息" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
      <template #content>
        <ai-card title="基本信息">
          <template #content>
            <el-form ref="dictDetailForm" :model="form" :rules="rules" size="small" label-width="110px">
              <el-form-item required label="数据项：" prop="code">
                <el-input v-model="form.code" style="width: 259px;" clearable
                          placeholder="请输入..."/>
              </el-form-item>
              <el-form-item required label="数据项名称：" prop="name">
                <el-input v-model="form.name" style="width: 259px;" clearable
                          placeholder="请输入..."/>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>
        <ai-card title="数据值" v-if="$route.query.id">
          <template #right>
            <el-button type="text" icon="iconfont iconAdd"
                       @click="form.dictionaryDetails.push({name:'',value:'',editable:true})"> 添加
            </el-button>
          </template>
          <template #content>
            <el-table border :data="form.dictionaryDetails" header-cell-class-name="table-header"
                      cell-class-name="table-cell">
              <el-table-column align="center" label="值">
                <div slot-scope="{row}">
                  <el-input size="small" v-if="row.editable" v-model="row.value" clearable/>
                  <span v-else>{{ row.dictValue }}</span>
                </div>
              </el-table-column>
              <el-table-column align="center" label="描述">
                <div slot-scope="{row}">
                  <el-input size="small" v-if="row.editable" v-model="row.name" clearable/>
                  <span v-else>{{ row.dictName }}</span>
                </div>
              </el-table-column>
              <el-table-column align="center" label="颜色">
                <div slot-scope="{row}">
                  <el-color-picker v-if="row.editable" v-model="row.dictColor" size="medium"></el-color-picker>
                  <span v-else>{{ row.dictColor || '未设置' }}</span>
                </div>
              </el-table-column>
              <el-table-column align="center" label="操作" width="109px">
                <div slot-scope="{row,$index}">
                  <section v-if="row.editable">
                    <el-button style="color: #2EA222" type="text" icon="iconfont iconCorrect"
                               @click="addDict(row)"/>
                    <el-button style="color: #f46" type="text" icon="iconfont iconClean"
                               @click="cancelEdit(row,$index)"/>
                  </section>
                  <section v-else>
                    <el-button class="dict-detail-operation" type="text" icon="iconfont iconEdit"
                               @click="editDetail(row)"/>
                    <el-button class="dict-detail-operation" type="text" icon="iconfont iconDelete"
                               @click="delDictValue(row.id)"/>
                  </section>

                </div>
              </el-table-column>
            </el-table>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button @click="$router.push({})">返回</el-button>
        <el-button type="primary" @click="modifyDict">保存</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "dictDetail",
  props: {
    instance: Function,
    permissions: Function
  },
  computed: {
    rules() {
      return {
        code: [
          {required: true, message: "请填写数据项"}
        ],
        name: [
          {required: true, message: "请填写数据项名称"}
        ],
        // dictionaryDetails: [
        //   {
        //     validator: (r, v, cb) => {
        //       if (v.every(item => item.dictName && item.dictValue)) {
        //         cb()
        //       }
        //     }
        //   }
        // ]
      }
    }
  },
  data() {
    return {
      form: {
        code: "",
        name: "",
        dictionaryDetails: []
      },
    }
  },
  created() {
    if (this.$route.query.id) this.getDict()
  },
  methods: {
    getDict() {
      this.instance.post("/admin/dictionary/queryDictDetail", null, {
        params: {dictionaryId: this.$route.query.id}
      }).then(res => {
        if (res?.data) {
          res.data.dictionaryDetails = res.data.dictionaryDetails.map(d => {
            return {
              ...d,
              editable: false,
              name: "",
              value: ""
            }
          })
          this.form = res.data
        }
      })
    },
    delDictValue(id) {
      this.$confirm("是否要删除该字典值", {
        type: 'error'
      }).then(() => {
        this.instance.post("/admin/dictionary/deletevalue", null, {
          params: {id}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getDict()
          }
        })
      }).catch(() => 0)
    },
    editDetail(row) {
      row.editable = true
      row.name = row.dictName
      row.value = row.dictValue
    },
    addDict(row) {
      row.dictValue = row.value
      row.dictName = row.name
      row.dictionaryId = this.form.id
      this.instance.post("/admin/dictionary/updateDetail", row).then(res => {
        row.editable = false
        row = res.data.data
        this.$message.success("提交成功!")
      })
    },
    cancelEdit(row, index) {
      if (row.id) {
        row.editable = false
      } else {
        this.form.dictionaryDetails.splice(index, 1)
      }
    },
    modifyDict() {
      this.$refs.dictDetailForm.validate(v => {
        if (v) {
          this.instance.post("/admin/dictionary/updateDict", this.form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.$router.push({})
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dictDetail {
  height: 100%;

  :deep( .el-table__row ){

    .el-input__inner {
      padding: 0 30px;
      border: none;
      text-align: center;
      background: #ddd;
      font-size: 14px;
    }
  }

}
</style>