ccl_plm-vue/src/views/modules/sys/dict.vue

<script>
import {saveDictType,selectDictTypePage,delDictType,delBatchDictType,updateDictType} from "../../../api/dict";
import DictData from "./dict-data.vue";
import DictDataSelect from "./dict-data-select.vue";
import {searchMenuAllListId} from "../../../api/base/properties";
export default {
  name: "dict",
  components: {DictDataSelect, DictData},
  data(){
    return{
      menuList:[],
      // 查询对象
      searchData:{
        site:this.$store.state.user.site,
        dictName:undefined,
        dictType:undefined,
        status:undefined,
        menuId:undefined,
      },
      // 分页条件
      no:1,
      size:50,
      total:0,
      // 新增对象
      saveData:{
        dictId:undefined,
        dictName:undefined,
        dictType: undefined,
        status:'Y',
        createBy:this.$store.state.user.name,
        createDate:undefined,
        updateBy:this.$store.state.user.name,
        updateDate:undefined,
        remark:undefined,
        menuId:undefined,
        site:this.$store.state.user.site,
      },
      //
      dataLabelValue:[
        {label:'字典名称',value:'dictName'},
        {label:'字典类型',value:'dictType'},
        {label:'状态',value:'status'},
        {label:'应用菜单',value:'menuId'},
      ],
      // 字典类型集合
      dictTypeList:[],
      // 模态框开关
      saveDataDialogFlag:false,
      // 新增修改状态(0新增,1修改)
      insertOrUpdate:0,
      // 新增修改规则
      dictTypeRules: {
        dictName:[{required:true,message:' ',tagger:['blur','change']}],
        dictType:[{required:true,message:' ',tagger:['blur','change']}],
        status:[{required:true,message:' ',tagger:['blur','change']}],
        menuId:[{required:true,message:' ',tagger:['blur','change']}],
      },
      // 选择的表格列
      selectionDictTypeList:[],
      // 选中的标签页
      activeTabs:'dictData',
    }
  },
  methods:{
    initDictTypeData(){
      selectDictTypePage(this.no,this.size,this.searchData).then(({data})=>{
        if (data && data.code === 0){
          this.dictTypeList = data.rows;
          this.total = data.total;
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{

      })
    },
    removeDictType(row){
      this.$message.success(row)
    },
    openDictTypeDialog(val,row){
      this.insertOrUpdate = val;
      if (row){
        this.saveData = {...row}
      }
      this.saveDataDialogFlag = true
    },
    closeSaveDataDialog(){
      this.$refs.saveDataForm.resetFields();
      this.saveData={
        dictId:undefined,
          dictName:undefined,
          dictType: undefined,
          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,
      }
    },
    saveOrUpdate(){
      this.$refs.saveDataForm.validate((validate,objects)=>{
        if (validate){
          if (this.insertOrUpdate === 0){
            this.saveDictType();
          }else {
            this.updateDictType();
          }
        }else {
          this.rulesValidateLabel(objects,this.dataLabelValue);
        }
      })
    },
    saveDictType(){
      saveDictType(this.saveData).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.initDictTypeData();
          this.saveDataDialogFlag = false;
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    updateDictType(){
      updateDictType(this.saveData).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.initDictTypeData();
          this.saveDataDialogFlag = false;
        }else {
          this.$message.error(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    delDictType(row){
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDictType(row).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.initDictTypeData();
          }else {
            this.$message.error(data.msg)
          }
        }).catch((error)=>{
          this.$message.error(error)
        })
      }).catch(() => {

      });
    },
    delBatchDictType(){
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delBatchDictType(this.selectionDictTypeList).then(({data})=>{
          if (data && data.code === 0){
            this.$message.success(data.msg);
            this.initDictTypeData();
            this.$refs.dictTypeTable.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.initDictTypeData();
    },
    dictTypeNoChange(val){
      this.no = val
      this.initDictTypeData();
    },
    clickDictType(dictType){
      this.$router.push({name:"sys-dict-data",params:{dictType:dictType},})
    },
    // 校验处理
    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
          }
        }
      }
    },
    searchMenuList() {
      let params = {
        site: this.$store.state.user.site
      }
      searchMenuAllListId(params).then(({data}) => {
        if (data && data.code === 0) {
          this.menuList = data.rows;
          if (this.menuList.length > 0) {
            this.searchData.menuId = this.menuList[0].menuId
          }
          this.initDictTypeData();
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
  },
  created() {
    this.searchMenuList();
  }
}
</script>

<template>
<div>
  <el-form ref="form" label-position="top" :model="searchData" label-width="80px">
    <el-row :gutter="10">
      <el-col :span="3">
        <el-form-item label="字典名称">
          <el-input v-model="searchData.dictName" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="字典类型">
          <el-input v-model="searchData.dictType" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="应用菜单">
          <el-select v-model="searchData.menuId" @change="initDictTypeData" clearable style="width: 100%;">
            <el-option :value="i.menuId" :label="i.name" v-for="i in menuList" :key="i.menuId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="状态">
          <dict-data-select v-model="searchData.status" clearable dict-type="sys_status" :use-default-value="false"></dict-data-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label=" ">
          <el-button type="primary" @click="initDictTypeData" 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><!-- v-if="false" -->
    <el-button type="primary" icon="el-icon-delete" @click="delBatchDictType" v-if="false">删 除</el-button>
  </div>
  <el-table
    border height="75vh" row-key="dictId"
    :data="dictTypeList"
    ref="dictTypeTable"
    @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="dictName" header-align="center" label="字典名称" show-overflow-tooltip/>
    <el-table-column prop="dictType" header-align="center" align="left" label="字典类型" show-overflow-tooltip>
      <template slot-scope="{row,$index}">
        <el-link style="cursor: pointer" @click="clickDictType(row.dictType)">{{row.dictType}}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="status" header-align="center" width="80" align="center" label="字典状态">
      <template slot-scope="{row,$index}">
        <span :style="{color:row.status === 'Y'?'#67C23A':'red'}">{{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" v-if="false">-->
    <el-table-column header-align="center" align="center" label="操作" width="160">
      <template slot-scope="{row,$index}">
        <el-button type="text" @click="openDictTypeDialog(1,row)" icon="el-icon-edit">修改</el-button>
        <el-button type="text" @click="delDictType(row)" icon="el-icon-delete" v-if="false">删除</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"  :close-on-click-modal="false" v-drag @close="closeSaveDataDialog" width="30%" :title="insertOrUpdate === 0?'新增-字典类型':'修改-字典类型'">
    <el-form ref="saveDataForm" label-position="top" :rules="dictTypeRules" :model="saveData" label-width="80px">
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="saveData.dictName" clearable/>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="saveData.dictType" :disabled="insertOrUpdate !== 0" clearable/>
      </el-form-item>
      <el-form-item label="应用菜单" prop="menuId">
        <el-select v-model="saveData.menuId" style="width: 40%;">
          <el-option :value="i.menuId" :label="i.name" v-for="i in menuList" :key="i.menuId"></el-option>
        </el-select>
      </el-form-item>
      <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-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 type="primary" @click="saveOrUpdate">确 定</el-button>
      <el-button @click="saveDataDialogFlag = false">取 消</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>