smart-grp-nof-web/src/views/demo/parameManagement/dataDictionary/index.vue

<template>
  <div>
    <d2-container>
      <!-- <template slot="header"
        ><div class="nav">当前所在位置:首页>数据字典</div></template
      > -->
      <div class="main">
      <div class="zt_right">
        <div class="nav">当前所在位置:首页>数据字典</div>
        <div class="right_main">
          <!-- <div class="right_title">
            <i
              class="fa fa-book"
              aria-hidden="true"
              style="padding-right: 5px"
            ></i
            >数据字典
          </div> -->
          <div class="right_table">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              id="formLabel"
            >
              <div class="searchRow">
                <div>
                  <el-form-item label="字典名称:">
                    <el-input
                    v-model="formInline.enumName"
                    placeholder="请输入"
                  ></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="search"
                      >查询</el-button
                    >
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-refresh-left"
                      @click="reset"
                      >重置</el-button
                    >
                  </el-form-item>
                </div>
                <div>
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      @click="addDic()"
                      >新建字典</el-button
                    >
                  </el-form-item>
                </div>
              </div>
            </el-form>

            <el-table
              :data="dataDictionaryList"
              border
              style="width: 100%"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column
                prop='enumName'
                label="字典名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="enumCode"
                label="字典标识"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="useState"
                label="使用状态"
                align="center"
              >
              <template slot-scope="scope">
                <div v-if="scope.row.useState==1">
                  启用
                </div>
                <div v-if="scope.row.useState==2">
                  停用
                </div>
              </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="更新时间" align="center">
              </el-table-column>

              <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="addChildren(scope.row)"
                    type="text"
                    size="small"
                    icon="el-icon-circle-check"
                    >添加子项</el-button
                  >
                  <el-button type="text" size="small" icon="el-icon-edit"
                     @click="editChildren(scope.row,2)">修改</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- <pagination
        
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        /> -->
          </div>
        </div>
      </div>
      </div>
    </d2-container>


    <!-- //字典弹框 -->
    <el-dialog :title="title" :visible.sync="dicDialog" id="dialogStyle">
  <el-form :model="form" id="dialogForm" :rules="rules" ref="formData">
    <el-form-item label="字典标识:" :label-width="formLabelWidth" prop="enumCode">
      <el-input v-model="form.enumCode" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="字典名称:" :label-width="formLabelWidth" prop="enumName">
      <el-input v-model="form.enumName" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="描述:" :label-width="formLabelWidth" prop="remark">
      <el-input v-model="form.remark" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="字典状态:" :label-width="formLabelWidth" id="switchLabel">
          <el-switch v-model="form.useState" active-text="启用"
  inactive-text="禁用"></el-switch>
    </el-form-item>
   
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dicDialog = false">取 消</el-button>
    <el-button type="primary" @click="defined('formData')">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import api from "@/api";
// 引入分页
import Pagination from "@/components/pagination";
export default {
  name: "dataDictionary",
  components: { Pagination },
  data() {
    return {
      //初始化弹框标题
      title:"",
      //初始化弹框状态时关闭的
      dicDialog:false,
      //label宽度
      formLabelWidth:"120px",
      //options
      options: [
        {
          value: "zhinan",
          label: "指南",

          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
          ],
        },
      ],

      //头部查询条件
      formInline: {
        enumName:"",
      },
      //表格字段
      dataDictionaryList: [],
    btnType:null,
    
     rowId:null,
      //分页
      total: 30,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
      //弹框初始化数据
      form:{
        enumCode:"",
        enumName:"",
        useState:true,
        remark:"",
      },
      //验证规则
      rules:{
        enumCode:[ {required:true,message:"请输入字典标识",trigger:"blur"}],
        enumName:[ {required:true,message:"请输入字典名称",trigger:"blur"}],
        //  useState:[ {required:true,message:"请输入字典名称",trigger:"blur"}],
       
      },
      // 点确定按钮时传的id
      parentId:""
       
     
    };
  },
  methods: {
    search() {
      this.getList()
    },
    reset() {
      this.formInline.enumName="";
      this.getList()
    },
    //列表
    getList() {
     var condition = {
        enumName: this.formInline.enumName,
        
      };
      condition = JSON.stringify(condition);
       var data = {
       
        condition: condition,
      };
      api.dataDic(data).then(res=>{
        if(res.code==200){
          this.dataDictionaryList=res.data;
        }
      })
      .catch(err=>{
        console.log(err)
      })
    },
    //新增
    addDataDicList(){
       
     let data={
        enumCode:this.form.enumCode,
        enumName:this.form.enumName,
        useState:this.form.useState==true?1:2,
        remark:this.form.remark,
        parentId:this.parentId
      }
      api.addDataDic(data)
        .then(res => {
          if (res.code == 200) {
            this.$message.success("新增成功");
            this.getList();
          }
        })
        .catch(err => {
          console.log(err)
        });
     
    },
     //编辑接口
    editList() {
      var data = {
       enumCode:this.form.enumCode,
        enumName:this.form.enumName,
        useState:this.form.useState==true?1:2,
        remark:this.form.remark,
        parentId:this.parentId,
        id:this.rowId,
       
      };
      api
        .editDataDic(data)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.getList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看
    handleCheck() {
      this.$router.push({
        path: "/warehouseInfo-check",
      });
    },
    //表格数的子节点加载
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 11,
            branchOffice: "中储粮河南分公司",
            directLibrary: "商丘直属库",
            subTreasury: "宁陵粮油储备公司",
            cfName: "1号仓",
            keeper: "白端静",
            lxfs: "13531314569",
            lastScan: "2019-08-21 16:11:59",
            cfState: "出库",
          },
          {
            id: 12,
            branchOffice: "中储粮河南分公司",
            directLibrary: "商丘直属库",
            subTreasury: "宁陵粮油储备公司",
            cfName: "1号仓",
            keeper: "白端静",
            lxfs: "13531314569",
            lastScan: "2019-08-21 16:11:59",
            cfState: "出库",
          },
        ]);
      }, 1000);
    },
    //新建字典
    addDic(row) {
      
      this.form={}
      this.form.useState=true
       this.title = "新增字典";
      this.dicDialog = true;
      this.parentId=0;
      this.btnType=1
      
    },
    //新建子项
    addChildren(row){
      
      this.title = "新增子项";
      this.form={

      }
        this.form.useState=true
      this.dicDialog = true;
        this.parentId=row.id;
           console.log(this.form.useState,"????")
    },
     //修改子项
    editChildren(row,type) {
      console.log(row,"mmmm")
         this.btnType=type
      this.title = "修改硬件参数";
      this.parentId=row.parentId;
      this.rowId=row.id;
      this.dicDialog = true;
      this.form = JSON.parse(JSON.stringify(row));
      if(this.form.useState==1){
        this.form.useState=true;
      }else{
        this.form.useState=false;
      }
      
    },
    //点击弹框确定按钮
    defined(formData){
      console.log(this.btnType,".....")
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if(this.btnType===2){
            console.log("编辑")
            this.editList();
          }else{
                console.log("新增")
             this.addDataDicList();
          }
          
             this.dicDialog = false;
        }
      });
    }
  },
  mounted(){
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;
 
  .zt_right {
    width: 100%;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .nav {
      padding: 10px 0 10px 10px;
      // color: #fff;

      font-size: 14px;

      background: #fff;
    }
    // .right_main {
    //   border: 1px solid #67a7df;
    //   background: #112f5d;

    //   margin-top: 10px;
    //   .right_title {
    //     color: #fff;
    //     border-bottom: 1px solid #67a7df;
    //     padding: 10px;
    //     font-size: 14px;
    //   }
    //   .right_table {
    //     padding: 20px;
    //   }
    // }
  }
}
.searchRow {
  display: flex;
  justify-content: space-between;
}

// #dialogForm .el-form-item .el-form-item_label{
//   color:#000;
// }

</style>