rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/sys/dict-data.vue

<script>
import {updateDictData,selectDictTypeList,saveDictData,selectDictDataPage,delDictData,delBatchDictData} from "../../../api/dict";
export default {
  name: "dictData",
  data(){
    return{
      // 查询对象
      searchData:{
        site:this.$store.state.user.site,
        dictLabel:undefined,
        dictType:undefined,
        status:undefined,
      },
      // 分页条件
      no:1,
      size:50,
      total:0,
      // 新增对象
      saveData:{
        dictId:undefined,
        dictLabel:undefined,
        dictType: undefined,
        dictValue: undefined,
        dictSort: 1,
        isDefault: 'N',
        status:'Y',
        createBy:this.$store.state.user.name,
        createDate:undefined,
        updateBy:this.$store.state.user.name,
        updateDate:undefined,
        remark:undefined,
        site:this.$store.state.user.site,
      },
      // 校验提示
      dataLabelValue:[
        {label:'字典标签',value:'dictLabel'},
        {label:'字典类型',value:'dictType'},
        {label:'字典键值',value:'dictValue'},
        {label:'字典排序',value:'dictSort'},
        {label:'状态',value:'status'},
      ],
      // 字典类型集合
      dictDataList:[],
      dictTypeList:[],
      // 模态框开关
      saveDataDialogFlag:false,
      // 新增修改状态(0新增,1修改)
      insertOrUpdate:0,
      // 新增修改规则
      dictDataRules: {
        dictLabel:[{required:true,message:' ',tagger:['blur','change']}],
        dictType:[{required:true,message:' ',tagger:['blur','change']}],
        dictValue:[{required:true,message:' ',tagger:['blur','change']}],
        dictSort:[{required:true,type:'number',message:' ',tagger:['blur','change']}],
        status:[{required:true,message:' ',tagger:['blur','change']}],
      },
      // 选择的表格列
      selectionDictTypeList:[],
      // 选中的标签页
      activeTabs:'dictData',
    }
  },
  methods:{
    initDictData(){
      selectDictDataPage(this.no,this.size,this.searchData).then(({data})=>{
        if (data && data.code === 0){
          this.dictDataList = data.rows;
          this.total = data.total;
          this.$refs.dictDataTable.clearSelection();
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{

      })
    },
    openDictTypeDialog(val,row){
      this.insertOrUpdate = val;
      if (row){
        this.saveData = {...row}
      }
      this.saveDataDialogFlag = true
    },
    closeSaveDataDialog(){
      this.$refs.saveDataForm.resetFields();
      this.saveData.remark = undefined;
    },
    openSaveDataDialog(){
      this.saveData.dictType = this.searchData.dictType;
    },
    saveOrUpdate(){
      this.$refs.saveDataForm.validate((validate,objects)=> {
        if (validate) {
          if (this.insertOrUpdate === 0){
            this.saveDictData();
          }else {
            this.updateDictData();
          }
        } else {
          this.rulesValidateLabel(objects,this.dataLabelValue)
        }
      })
    },
    saveDictData(){
      saveDictData(this.saveData).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.initDictData();
          this.saveDataDialogFlag = false;
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    updateDictData(){
      updateDictData(this.saveData).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.initDictData();
          this.saveDataDialogFlag = false;
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    delDictData(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDictData(row).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.initDictData();
          }else {
            this.$message.error(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delBatchDictData(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBatchDictData(this.selectionDictTypeList).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.initDictData();
            this.$refs.dictDataTable.clearSelection();
          }else {
            this.$message.error(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val){
      this.selectionDictTypeList = val;
    },
    dictTypeSizeChange(val){
      this.no = 1
      this.size = val
      this.initDictData();
    },
    dictTypeNoChange(val){
      this.no = val
      this.initDictData();
    },
    selectDictTypeList(){
      let params = {
        site:this.$store.state.user.site,
      }
      selectDictTypeList(params).then(({data})=>{
        if (data && data.code === 0){
          this.dictTypeList  = data.rows;
          if (this.$route.params.dictType){
            this.searchData.dictType = this.$route.params.dictType
          }else {
            if (this.dictTypeList.length > 0){
              this.searchData.dictType = this.dictTypeList[0].dictType;
            }
          }
          this.initDictData();
        }
      }).catch((error)=>{

      })
    },
    // 校验处理
    rulesValidateLabel(objects, labels) {
      for (let filed in objects) {
        for (let i = 0; i < labels.length; i++) {
          let quotationToolColumn = labels[i];
          if (quotationToolColumn.value === filed) {
            this.$message.warning(quotationToolColumn.label+"为空或填写不正确");
            return
          }
        }
      }
    },
  },
  created() {

  },
  activated() {
    this.selectDictTypeList()
  }
}
</script>

<template>
  <div>
    <el-form ref="form" label-position="top" :model="searchData" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-form-item label="字典名称">
            <el-select v-model="searchData.dictType" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in dictTypeList"
                :key="item.dictType"
                :label="item.dictName"
                :value="item.dictType">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="字典标签">
            <el-input v-model="searchData.dictLabel" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="状态">
            <el-select v-model="searchData.status" clearable style="width: 100%" placeholder="请选择">
              <el-option
                key="Y"
                label="启用"
                value="Y">
              </el-option>
              <el-option
                key="N"
                label="停用"
                value="N">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button type="primary" @click="initDictData" icon="el-icon-search">查 询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-bottom: 8px;margin-top: 8px">
      <el-button type="primary" icon="el-icon-plus" @click="openDictTypeDialog(0)">新 增</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="delBatchDictData">删 除</el-button>
    </div>
    <el-table
      border height="75vh" row-key="dictCode"
      :data="dictDataList"
      ref="dictDataTable"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
      <el-table-column type="index" width="80" header-align="center" label="字典序号" align="right"/>
      <el-table-column prop="dictLabel" header-align="center" align="center" label="字典标签"/>
      <el-table-column prop="dictValue" header-align="center" label="字典键值"/>
      <el-table-column prop="dictSort" header-align="center" label="字典排序"/>
      <el-table-column prop="status" header-align="center" align="center" label="字典状态">
        <template slot-scope="{row,$index}">
          <span>{{row.status === 'Y'?'启用':'停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="left" label="备注"/>
      <el-table-column prop="createBy" header-align="center" label="创建者"/>
      <el-table-column prop="createDate" header-align="center" align="center" label="创建时间"/>
      <el-table-column header-align="center" align="center" label="操作" width="160">
        <template slot-scope="{row,$index}">
          <el-button type="text" :disabled="row.isSystem === 'Y'" @click="openDictTypeDialog(1,row)" icon="el-icon-edit">修改</el-button>
          <el-button type="text" :disabled="row.isSystem === 'Y'" @click="delDictData(row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="dictTypeSizeChange"
      @current-change="dictTypeNoChange"
      :current-page="no"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="size"
      :total="total"
      layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog :visible.sync="saveDataDialogFlag" @open="openSaveDataDialog" @close="closeSaveDataDialog" width="30%" :title="insertOrUpdate === 0?'新增-字典数据':'修改-字典数据'">
      <el-form ref="saveDataForm" label-position="top" :rules="dictDataRules" :model="saveData" label-width="80px">
        <el-form-item label="字典类型" prop="dictType">
          <el-input disabled v-model="saveData.dictType" clearable/>
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="saveData.dictLabel" clearable/>
        </el-form-item>
        <el-form-item label="数据键值" prop="dictValue">
          <el-input v-model="saveData.dictValue" clearable/>
        </el-form-item>
        <el-form-item label="数据排序" prop="dictSort">
          <el-input-number v-model="saveData.dictSort" :min="0" :controls="false"/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="saveData.status">
                <el-radio :label="'Y'">启用</el-radio>
                <el-radio :label="'N'">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label=" " >
              <el-checkbox v-model="saveData.isDefault" :true-label="'Y'" :false-label="'N'">默认</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" style="height: 90px">
          <el-input type="textarea" :autosize="{minRows: 3, maxRows: 3}" resize='none' v-model="saveData.remark"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="saveDataDialogFlag = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<style scoped>
/deep/ .el-table .cell {
  line-height: 14px;
  font-size: 12px;
  height: auto;
}
/deep/ .el-textarea .el-textarea__inner {
  padding: 0px 5px;
}
</style>