实战练习

dictionary.vue

<template>
    <div class="main printTemplate printTemplateD">
        <div class="titleBox">
            <el-row :gutter="20">
                <el-col :span="21"><div class="grid-content bg-purple">数据字典</div></el-col>
                <el-col :span='3'><el-button class="el-icon-plus" @click="modify({type:'add'})">添加字典分组</el-button></el-col>
            </el-row>
        </div>
        <wordbook v-show='$store.state.dictionaryList'></wordbook>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            type="index"
            label="序号"
            align="center"
            :index="indexMethod">
            </el-table-column>
            <el-table-column  prop="typegroupname"  label="字典分组名称"  align="center"></el-table-column>
            <el-table-column  prop="typegroupcode"  label="字典分组Code"  align="center"></el-table-column>
            <el-table-column  prop="typegroupstatus"  label="字典分组状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.typegroupstatus == 'normal'">启用</span>
                    <span v-else>停用</span>
                </template>
            </el-table-column>
            <el-table-column  prop="typegroupdesc" label="字典分组描述"   align="center"></el-table-column>
            <el-table-column  prop="" label="操作" width="400"  align="center">
            <template slot-scope="scope">
                <el-button  type="primary" size="mini" @click ="modify({type:'edit',id:scope.row.id})"><i class="el-icon-view"></i>修改</el-button>
                <el-button type="warning" size="mini" @click="del(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
                <el-button type="primary" size="mini" @click="manage(scope.row.id)"><i class="el-icon-setting"></i>字典管理</el-button>
                <el-button v-if="scope.row.typegroupstatus  == 'stop'" size="mini" @click='updateStatus({id:scope.row.id,typegroupstatus:scope.row.typegroupstatus})' style="background:#F5834C;color:#fff;">
                    <span class="el-icon-video-play">启用</span>
                </el-button>
                <el-button v-else type="primary" size="mini" @click='updateStatus({id:scope.row.id,typegroupstatus:scope.row.typegroupstatus})'> 
                    <span class="el-icon-video-pause">停用</span>
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 添加、修改数据字典 -->
        <el-dialog 
            width="30%" 
            :visible.sync="importVisible" 
            class="importVisible"
            :title='DialogTitle'
            @closed='handleClose'
            >
            <el-form label-width="110px" :model="addData" :rules="rules" ref="addData" status-icon >
                <el-form-item v-show="this.addData.id !== ''" label="字典分组ID" prop='id'>
                    <el-input v-model="addData.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="字典分组名称" prop='typegroupname'>
                    <el-input v-model="addData.typegroupname"></el-input>
                </el-form-item>
                <el-form-item label="字典分组编码" prop='typegroupcode'>
                    <el-input v-model="addData.typegroupcode"></el-input>
                </el-form-item>
                <el-form-item label="字典分组状态" prop='typeGroupStatus'>
                    <el-input v-model="addData.typeGroupStatus" disabled></el-input>
                </el-form-item>
                <el-form-item label="字典分组描述" prop='typeGroupDesc'>
                    <el-input v-model="addData.typeGroupDesc"></el-input>
                </el-form-item>
                <span style='color:#f56c6c'>{{errMsg}}</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="medium" round  @click="submitForm('addData')">确认</el-button>
                <el-button type="primary" size="medium"  plain round  @click="importVisible =false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 删除字典分组 -->
        <el-dialog
            width="30%"
            :visible.sync="deleteGroups"
            class="delete"
            :close-on-click-modal = 'false'
            >
            <h3 slot="title" class='dialogTitle'>删除该字典分组</h3>
            <div class='confirm-dialog'>
                <img src='../assets/image/tools/icons8-delete.png'>
                <span>确定删除该字典分组吗?</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="medium" round @click='sureDel'>确定</el-button>
                <el-button type="primary" size="medium"  plain round @click="deleteGroups = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 停用使用数据字典 -->
        <el-dialog
            width="30%"
            :visible.sync="isSuspend"
            :close-on-click-modal = 'false'
            :title='title'
            class="isSuspend"
            >
            <div class='confirm-dialog'>
            <img :src= url>
            <span>{{activeMessage}}</span>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="medium" round @click = 'SureSuspend'>确定</el-button>
            <el-button type="primary" size="medium"  plain round @click="isSuspend = false">取消</el-button>
            </span>
        </el-dialog>
        <div class="bottom">
            <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :total="logTotal ">
            </el-pagination>
            <div v-show="logTotal>0">
            <span>{{start}}</span>-<span>{{end}}</span>共<span>{{logTotal}}</span>条
            </div>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
import wordbook from '../components/v-dictionary'
export default {
    data () {
        return {
            currentPage:1,
            srcs:require('../assets/image/tools/开始.png'),
            nosrc:require('../assets/image/tools/stop.png'),
            url:"",
            isSuspend:false,
            importVisible:false,
            deleteGroups:false,
            logTotal: 0,
            errMsg:'',
            activeMessage:'',
            start:'',
            end:'',
            title:'',
            DialogTitle:'',
            addData:{
                typegroupname:'',
                typegroupcode:'',
                typeGroupStatus:'',
                typeGroupDesc:'',
                typeGroupdSort:'',
                id:''
            },
            tableData:[],
            selectId:'',
            listData:{
                pageId:1,
                pageNum:10,
            },
            delData:{
                id:'',
            },
            suspendData:{
                id:'',
                key:''
            },
            dicData:{
                pageId:1,
                pageNum:1000,
                pid:'',
            },
            rules: {
                typegroupname:[
                    {required:true,message:'请输入字典分组名称！', trigger:'blur'}
                ],
                typegroupcode:[
                    {required:true,message:'请输入字典分组编码！', trigger:'blur'}
                ]
            },
        }
    },
    components: {
        wordbook
    },
    created(){
        this.getList();
    },
    methods:{
        indexMethod(index) {
            this.start = (10* (this.listData.pageId-1))+1;
            this.end = this.start + 9;
            return (10* (this.listData.pageId-1))+1+index;
        },
        handleCurrentChange:function(val){
            this.listData.pageId = val;
            this.getList();
        },
        //获取列表
        getList: function(){
            let _this = this;
            axios.post(this.$geng+'dd/getTypeGroup.do',_this.listData, {
            transformRequest: [
                function (data) {
                    let params = '';
                    for (let index in data) {
                    params += index + '=' + data[index] + '&'
                    }
                    return params;
                }
                ]
            }).then(rs=>{
                if(rs.data.code == 1){
                    _this.tableData = rs.data.data.typegroup;
                    _this.logTotal = Number(rs.data.data.count);
                }
            });
        },
        modify:function(item){
            if(item.type == "add"){
                this.DialogTitle = "添加字典分组"
                this.addData.typegroupname = '',
                this.addData.typegroupcode = '',
                this.addData.typeGroupStatus = '',
                this.addData.typeGroupDesc = '',
                this.addData.id = '';
                this.addData.typeGroupStatus = '启用';
            }else{
                this.DialogTitle = "修改字典分组"
                this.addData.id = item.id;
                this.selectId = item.id;
                console.log(this.tableData);
                for(var i = 0;i < this.tableData.length;i++){
                    if(this.selectId == this.tableData[i].id){
                        this.addData.typegroupname = this.tableData[i].typegroupname;
                        this.addData.typegroupcode = this.tableData[i].typegroupcode;
                        this.addData.typeGroupStatus = this.tableData[i].typegroupstatus;
                        if(this.tableData[i].typegroupstatus == 'normal'){
                            this.addData.typeGroupStatus = '启用'
                        }else{
                            this.addData.typeGroupStatus = '停用'
                        }
                        this.addData.typeGroupDesc = this.tableData[i].typegroupdesc;
                    }
                }
            }
            this.importVisible = true;
        },
        // 确定
        submitForm:function(addData){
            this.$refs[addData].validate((valid)=>{
                if(valid){
                    let url = (this.addData.id == '') ? 'dd/addTypeGroup.do' : 'dd/updateTypeGroup.do';
                    this.addData.typeGroupStatus = 'normal';
                    axios.post(this.$li + url,this.addData,{
                        transformRequest: [
                            function (data) {
                                let params = '';
                                for (let index in data) {
                                params += index + '=' + data[index] + '&'
                                }
                                return params;
                            }
                        ]
                    }).then(rs=>{
                        if(rs.data.code == 1){
                            this.importVisible = false;
                            this.getList();
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        //删除
        del:function(id){
            this.deleteGroups = true;
            this.delData.id = id;
        },
        sureDel:function(){
            axios.post(this.$li+'dd/deleteGroup.do',this.delData,{
                transformRequest: [
                    function (data) {
                        let params = '';
                        for (let index in data) {
                        params += index + '=' + data[index] + '&'
                        }
                        return params;
                    }
                ]
            }).then(rs=>{
                if(rs.data.code == 1){
                    this.deleteGroups = false;
                    this.getList();
                }
            })
        },
        //字典管理列表
        manage:function(id){
            this.selectId = id;
            this.$store.state.dictionaryId = id;
            this.dicData.pid = id;
             for(var i = 0;i < this.tableData.length;i++){
                if(this.selectId == this.tableData[i].id){
                    this.$store.state.dictionaryName = this.tableData[i].typegroupname;
                }
            }
            axios.post(this.$li+'dd/getType.do',this.dicData,{
                transformRequest: [
                    function (data) {
                        let params = '';
                        for (let index in data) {
                        params += index + '=' + data[index] + '&'
                        }
                        return params;
                    }
                ]
            }).then(rs=>{
                if(rs.data.code == 1){
                    this.$store.state.dictionaryList = rs.data.data.type;
                    this.$store.state.dicLogTotal = Number(rs.data.data.count);
                }
            })
            this.$store.state.dictionaryList = true;
        },
        // 启用、停用数据字典
        updateStatus:function(item){
            console.log(item);
            this.suspendData.id = item.id;
            if(item.typegroupstatus=="normal"){
                this.suspendData.key = "stop"
            }else{
                this.suspendData.key = "normal"
            }
            this.title=item.typegroupstatus=="stop"?'启用':'停用'
            this.url=item.typegroupstatus=="stop"? this.srcs : this.nosrc
            this.activeMessage=item.typegroupstatus=="stop"?'确定设为启用状态吗?':'确定设为停用状态吗?'
            this.isSuspend = true;
        },
        SureSuspend: function(){
            axios.post(this.$li+'dd/setStatusGroup.do',this.suspendData,{
                transformRequest: [
                    function (data) {
                        let params = '';
                        for (let index in data) {
                        params += index + '=' + data[index] + '&'
                        }
                        return params;
                    }
                ]
            }).then(rs=>{
                if(rs.data.code == 1){
                this.activeMessage='该操作成功'
                setTimeout(()=>{
                    this.isSuspend = false;
                },1000)
                this.getList();
                }
            })
        },
        //关闭表单时清除错误提示
        handleClose:function(){
            this.$refs.addData.resetFields();
        }

    }
}
</script>

v-dictionary.vue

<template>
  <div class="cartonmanage">
    <div class="titleBox">
      <p class="title">字典管理</p>
      <div class='close' @click='$store.state.dictionaryList = false'>X</div>
    </div>
    <div class='critical'>
      <el-row :gutter='20'>
        <el-col :span='2.5' style="float:right;">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="del({type: 'allDel'})"><i class="el-icon-delete"></i>删除选中</el-button>
          </div>
        </el-col>
         <el-col :span='2.5' style="float:right;">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click='addDic({type: "add"})'><i class="el-icon-plus"></i>添加字典</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="this.$store.state.dictionaryList"
      stripe
      height="410"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column   prop="typename"  label="字典名称" align="center"></el-table-column>
      <el-table-column  prop="typecode" label="字典编码" align="center"></el-table-column>
      <el-table-column  prop="status"  label="字典状态" align="center"> 
        <template slot-scope="scope">
          <span v-if="scope.row.status !== 'normal'">停用</span>
          <span v-else>启用</span>
        </template>
      </el-table-column>
      <el-table-column  prop="" label="操作"  width="300">
        <template slot-scope="scope">
          <el-button  type="primary" size="mini" @click="addDic({type: 'edit',id: scope.row.id})"><i class="el-icon-edit"></i>修改</el-button>
          <el-button  type="warning" size="mini" @click="del({type: 'oneDel',id: scope.row.id})"><i class="el-icon-delete"></i>删除</el-button>
          <el-button  type="primary" v-if="scope.row.status == 'normal'" size="mini" @click="setState({id:scope.row.id})">
            <span class="el-icon-video-pause">停用</span>
          </el-button>
          <el-button v-else  size="mini" @click="setState({id:scope.row.id})" style="background:#F5834C;color:#fff;">
             <span class="el-icon-video-play">启用</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="" width='100' align='center'>
        <template slot-scope="scope" class='img'>
          <!-- <img class="first" src="../assets/image/icons/icon/zd1.png" style="margin-top:-4px;" @click="firstOrLast({order:'first',id:scope.row.id})">
          <img class="last" src="../assets/image/icons/icon/zd.png" style="margin-top:-4px;" @click="firstOrLast({order:'last',id:scope.row.id})">
          <img class="up" src="../assets/image/icons/icon/sy.png"  style="margin-top:-4px;" @click="changePlace({order:'up',id:scope.row.id})">
          <img class="down" src="../assets/image/icons/icon/xy.png" style="margin-top:-4px;" @click="changePlace({order:'down',id:scope.row.id})"> -->
          <span class="el-icon-upload2" @click="firstOrLast({order:'first',id:scope.row.id})"></span>
          <span class="el-icon-download" @click="firstOrLast({order:'last',id:scope.row.id})"></span>
          <span class="el-icon-top" @click="changePlace({order:'up',id:scope.row.id})"></span>
          <span class="el-icon-bottom" @click="changePlace({order:'down',id:scope.row.id})"></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/修改字典-->
    <el-dialog 
      width="30%" 
      :visible.sync="importVisible" 
      class="importVisible"
      :title='title'
      @closed='handleClose'
      >
      <el-form label-width="100px" :model="addData" :rules="rules" ref="addData" status-icon >
          <el-form-item label="字典名称" prop='typename'>
              <el-input v-model="addData.typename"></el-input>
          </el-form-item>
          <el-form-item label="字典编码" prop='typecode'>
              <el-input v-model="addData.typecode"></el-input>
          </el-form-item>
          <el-form-item label="字典状态" prop='status'>
              <el-input v-model="addData.status" disabled></el-input>
          </el-form-item>
          <el-form-item label="字典附加参数" prop='typeParam'>
              <el-input v-model="addData.typeParam"></el-input>
          </el-form-item>
          <el-form-item label="字典描述" prop='typeDesc'>
              <el-input v-model="addData.typeDesc"></el-input>
          </el-form-item>
          <el-form-item label="字典分组名称" prop='TSTypegroupid'>
              <el-input v-model="addData.TSTypegroupid" disabled></el-input>
          </el-form-item>
          <span style='color:#f56c6c'>{{errMsg}}</span>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" round  @click="sureAdd('addData')">确认</el-button>
          <el-button type="primary" size="medium"  plain round  @click="importVisible =false">取消</el-button>
      </span>
    </el-dialog>
     <div class="bottom">
        <div v-show="this.$store.state.dicLogTotal>0">
          共<span>{{this.$store.state.dicLogTotal}}</span>条
        </div>
    </div>
    <!-- 删除字典 -->
    <el-dialog
      width="30%"
      :visible.sync="deleteDic"
      class="delete"
      :close-on-click-modal = 'false'
      >
      <h3 slot="title" class='dialogTitle'>删除该字典</h3>
      <div class='confirm-dialog'>
        <img src='../assets/image/tools/icons8-delete.png'>
        <span>确定删除该字典吗?</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" round @click='sureDel'>确定</el-button>
        <el-button type="primary" size="medium"  plain round @click="deleteDic = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 停用/启用弹框 -->
    <el-dialog
      width="30%"
      :visible.sync="setDialog"
      :title="setTitle"
      class="setDialog"
      >
      <div class='confirm-dialog'>
        <img v-show="startImg" src="../assets/image/tools/开始.png" alt="">
        <img v-show='stopImg' src="../assets/image/tools/stop.png" alt="">
        <span>{{setMsg}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" round @click='sureSet'>确定</el-button>
        <el-button type="primary" size="medium"  plain round @click="setDialog = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 提示框 -->
    <el-dialog
      width="30%"
      :visible.sync="delDialog"
      class="delDialog"
      >
      <div class='confirm-dialog'>
        <div><span>请选择需要删除的选项!</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      currentPage:1,
      deleteDic: false,//删除字典
      delDialog:false,
      setDialog:false,
      importVisible:false,
      stopImg:false,
      startImg:false,
      start:'',
      end:'',
      dialogTitle:'',
      title:'',
      setTitle:'',
      setMsg:'',
      errMsg:'',
      addData:{
        typename:'',
        typecode:'',
        status:'',
        typeParam:'',
        typeDesc:'',
        TSTypegroupid:'',
        TSTypesid:'',
        id:'',
      },
      listData:{
        pageId:1,
        pageNum:1000,
        pid:''
      },
      ids: '',
      selected:'',
      setData:{
        key:'',
        id:'',
      },
      deleteType: {
       id:'',
      },
      moveData:{
        flag:'',
        id:'',
      },
      reMovalData:{
        formId:'',
        toId:'',
        flag:''
      },
      tableData: [],
      rules:{
        typename:[
          {required:true,message:'请输入字典名称',trigger:'blur'}
        ],
        typecode:[
          {required:true,message:'请输入字典编码',trigger:'change'}
        ],
      }
    }
  },
  created(){
  },
  methods:{
    addList:function(){
      this.listData.pid = this.$store.state.dictionaryId;
      axios.post(this.$li+'dd/getType.do',this.listData,{
        transformRequest: [
          function (data) {
            let params = '';
            for (let index in data) {
              params += index + '=' + data[index] + '&'
            }
            return params;
          }
        ]
      }).then(rs=>{
          if(rs.data.code == 1){
            this.$store.state.dictionaryList = rs.data.data.type;
            this.$store.state.dicLogTotal = Number(rs.data.data.count);
          }
      })
    },
    handleSelectionChange: function(val){
      if(val.length == 0){
        this.selected = false;
      }else{
        this.selected = true;
      }
      let selAdd = [];
      for(let i = 0;i <val.length; i++){
        selAdd.push(val[i].id);
      }
      this.ids = selAdd.toString();
    },
    //置顶置低
    firstOrLast:function(item){
      this.moveData.id = item.id;
      this.moveData.flag = (item.order == 'first')?'up':'down';
      axios.post(this.$li+'dd/setUpOrDown.do',this.moveData,{
        transformRequest: [
          function (data) {
            let params = '';
            for (let index in data) {
              params += index + '=' + data[index] + '&'
            }
            return params;
          }
        ]
      }).then(rs=>{
        if(rs.data.code == 1){
          this.addList();
        }
      })
    },
    //上移下移
    changePlace:function(item){
      for(var i = 0;i<this.$store.state.dictionaryList.length;i++){
          if(item.id == this.$store.state.dictionaryList[i].id){
            this.reMovalData.formId = this.$store.state.dictionaryList[i].id;
            if(item.order == 'up'){
              this.reMovalData.toId = this.$store.state.dictionaryList[i-1].id;
              this.reMovalData.flag = 'up';
            }else{
              this.reMovalData.toId = this.$store.state.dictionaryList[i+1].id;
              this.reMovalData.flag = 'down';
            }
          }
      }
      axios.post(this.$li+'dd/changeOrder.do',this.reMovalData,{
          transformRequest: [
          function (data) {
            let params = '';
            for (let index in data) {
              params += index + '=' + data[index] + '&'
            }
            return params;
          }
        ]
      }).then(rs=>{
        if(rs.data.code == 1){
          this.addList();
        }
      })
    },
    //添加/修改字典
    addDic: function(item){
      this.errMsg = '';
      if(item.type=='edit'){
        this.title = '修改字典'
        this.addData.id = item.id;
        for(var i = 0;i<this.$store.state.dictionaryList.length;i++){
          if(item.id == this.$store.state.dictionaryList[i].id){
            this.addData.typename = this.$store.state.dictionaryList[i].typename;
            alert(this.addData.typename);
            this.addData.typecode = this.$store.state.dictionaryList[i].typecode;
            if(this.$store.state.dictionaryList[i].status == 'normal'){
              this.addData.status = '启用';
            }else{
              this.addData.status = '停用';
            }
            this.addData.typeParam = this.$store.state.dictionaryList[i].typeparam;
            this.addData.typeDesc = this.$store.state.dictionaryList[i].typedesc;
          }
        }
      }else{
        this.title = '添加字典';
        this.addData.status = '启用';
        this.addData.id = '';
        this.addData.typename = '';
        this.addData.typecode = '';
        this.addData.typeParam = '';
        this.addData.typeDesc = '';
      }
      this.importVisible = true;
      this.addData.TSTypegroupid = this.$store.state.dictionaryName;
    },
    sureAdd:function(addData){
      this.addData.status = 'normal';
      this.addData.TSTypegroupid = this.$store.state.dictionaryId;
      let url = (this.addData.id !== '')?'dd/updateType.do':'dd/addType.do';
      this.$refs[addData].validate((valid) => {
        if(valid){
          axios.post(this.$li+url,this.addData,{
            transformRequest: [
              function (data) {
                let params = '';
                for (let index in data) {
                  params += index + '=' + data[index] + '&'
                }
                return params;
              }
            ]
          }).then(rs=>{
            if(rs.data.code == 1){
              this.importVisible = false;
              this.addList();
            }else if(rs.data.code == 0){
              this.errMsg = "该字典编码已经存在，不能重复添加！"
            }
          })
        }else{
          return false;
        }
      })
    },
    //删除
    del:function(item){
      if(item.type == 'oneDel'){
        this.deleteDic = true;
        this.deleteType.id = item.id;
      }else{
        if(this.selected == false){
          this.delDialog = true;
        }else{
          this.deleteDic = true;
          this.deleteType.id=this.ids;
        }
      }
    },
    sureDel:function(){
      axios.post(this.$li+'dd/deleteType.do',this.deleteType, {
        transformRequest: [
          function (data) {
            let params = '';
            for (let index in data) {
              params += index + '=' + data[index] + '&'
            }
            return params;
          }
        ]
      }).then(rs=>{
        if(rs.data.code == 1){
          this.deleteDic = false;
          this.addList();
        }else if(rs.data.code == 0){
          this.$message({
            showClose: true,
            message: rs.data.message,
            type: 'error'
          });
        }
      });
    },
    //启停
    setState:function(item){
      this.setData.id = item.id;
      for(var i = 0;i<this.$store.state.dictionaryList.length;i++){
          if(item.id == this.$store.state.dictionaryList[i].id){
            this.setData.key = (this.$store.state.dictionaryList[i].status == 'normal')?'stop':'normal';
            this.setTitle = (this.$store.state.dictionaryList[i].status == 'normal')?'停用':'启用';
            this.setMsg = (this.$store.state.dictionaryList[i].status == 'normal')?'确定设为停用状态吗？':'确定设为启用状态吗？';
            if(this.$store.state.dictionaryList[i].status == 'normal'){
              this.stopImg = true;
              this.startImg = false;
            }else{
              this.startImg = true;
              this.stopImg = false;
            }
          }
      }
      this.setDialog = true;
    },
    sureSet:function(){
      axios.post(this.$li+'dd/setStatusType.do',this.setData,{
         transformRequest: [
          function (data) {
            let params = '';
            for (let index in data) {
              params += index + '=' + data[index] + '&'
            }
            return params;
          }
        ]
      }).then(rs=>{
        if(rs.data.code == 1){
          this.setDialog = false;
          this.addList();
        }
      })
    },
    //关闭表单时清除错误提示
    handleClose:function(){
        this.$refs.addData.resetFields();
    }
  }
}
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import dialogstore from './modules/dialog'

Vue.use(Vuex)

const state = {
  dictionaryList:false,//数据字典
  dictionaryId:'',//数据字典Id
  dicLogTotal:'',//数据字典分页总条数
  dicPageId:'',//数据字典当前页页码
  dictionaryName:'',//数据字典字典分组名称
}

export default new Vuex.Store({
  modules: {
    dialog: dialogstore
  },
  state,
  actions,
  mutations,
  getters
})