soc_web/src/views/system/multilayerdict/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--多层级字典数-->
       <el-col :span="6" :xs="24">
     <!--   <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
          :customRequest="getTree"
          :defaultProps="defaultProps"
        >
        </org-tree> -->
        <div class="dic-tree">
          <div class="tree-container">
            <el-tree
                :data="dictTreeData"
                node-key="id"
                :default-expand-all="true"
                class="el-tree-ex"
                @node-click="clickTreeNode"
                :props="defaultProps"
                :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => handleAdd(data)">
                      新增
                    </el-button>
                    <el-button v-if="data.id !=null"
                      type="text"
                      size="mini"
                      @click="() => handleUpdate(data)">
                      编辑
                    </el-button>
                    <el-button v-if="data.id !=null && data.children.length==0 && data.isSystem=='0' "
                      type="text"
                      size="mini"
                      @click="() => handleDelete(data)">
                      删除
                    </el-button>
                  </span>
                </span>
              </el-tree>
          </div>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="18" :xs="24" v-if="1">
        <div class="main-right-box">
        <div class="main-search-box">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
        >
          <!-- <el-form-item label="字典名称" prop="dictType">
            <el-select v-model="queryParams.dictType">
              <el-option
                v-for="item in typeOptions"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictType"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="字典标签" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入字典标签"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="数据状态"
              clearable
            >
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" >
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>        
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
      </div>
      <el-table
        border
        height="646"
        size="small"
        v-loading="loading"
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <!-- <el-table-column label="字典编码" align="center" prop="parentId" /> -->
        <el-table-column label="字典标签" align="center" prop="name"  :show-overflow-tooltip="true" width="340">
          <template slot-scope="scope">
          <span
            v-if="scope.row.listClass == '' || scope.row.listClass == 'default'"
          >{{ scope.row.name }}</span
          >
            <el-tag
              v-else
              :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
            >{{ scope.row.name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="字典键值" align="center" prop="code"  width="100"/>
        <el-table-column label="字典排序" align="center" prop="sort" width="100"/>
        <el-table-column label="系统内置字典" align="center" prop="isSystem" width="120">
          <template slot-scope="scope">
           {{scope.row.isSystem =='1'?"是":"否"}}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_normal_disable"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.createTime
                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}</span>
          </template>
        </el-table-column> 
        
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <!-- <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:dict:edit']"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:dict:remove']"
            >删除</el-button> 
          </template>
        </el-table-column> -->
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
        </div>
      </el-col>
    </el-row>
       <!-- 添加或修改参数配置对话框 -->
       <DialogCom :title="title" :visible.sync="open" width="700px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="父级字典">
                <el-input v-model="form.parentName" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio
                    v-for="dict in dict.type.sys_normal_disable"
                    :key="dict.value"
                    :label="dict.value"
                  >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="字典标签" prop="name">
                <el-input v-model="form.name" placeholder="请输入字典标签" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字典键值" prop="code">
                <el-input v-model="form.code" :disabled="form.isSystem=='1'" placeholder="请输入字典键值" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="字典排序" prop="sort">
                <el-input-number
                  style="width: 100%"
                  v-model="form.sort"
                  controls-position="right"
                  :min="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统内置" prop="isSystem">
                <el-radio-group v-model="form.isSystem" :disabled="true">
                  <el-radio
                    v-for="dict in dict.type.sys_yes_no_num"
                    :key="dict.value"
                    :label="dict.value"
                  >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
              maxlength="500"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </DialogCom>
  </div>
</template>

<script>
import OrgTree from "@/components/orgTree";
import {
  optionselect as getDictOptionselect,
  getType,
} from "@/api/system/dict/type";
import dayjs from "dayjs";
import {treeList,delData,
  addData,
  updateData,
  getData,tableListData,} from "@/api/system/multilayerdict";

export default {  
  dicts: [
    "sys_normal_disable",
    "sys_user_sex",
    "sys_user_is_lock",
    "sys_yes_no",
    "sys_yes_no_num",
  ],

  name: "multLayerDict",
  mixins: [],
  components: {OrgTree},

  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },      
      dictTreeData:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个停用
      single: true,
      // 非多个停用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      dataList: [],
      // 默认字典类型
      defaultDictType: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      
      // 类型数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parentId:-1,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "字典标签不能为空", trigger: "blur" },
        ],
        code: [
          { required: true, message: "字典键值不能为空", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "字典排序不能为空", trigger: "blur" },
        ],
      },
    };
  },

  watch: {
   
  },

  created() {
    // const dictId = this.$route.params && this.$route.params.dictId;
    // this.getType(dictId);
    // this.getTypeList();
   
  },

  mounted() {
    this.getDictTreeData();
    this.getHeight();
    this.handleQuery();
  },

  methods: {
    dayjs,
    getHeight(){
      let orgTree = document.querySelector('.dic-tree');
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          orgTree.style.height = entry.contentRect.height + 'px';
        }
      });
      resizeObserver.observe(document.querySelector('.main-right-box'));
    },   
    getTree() {
      return treeList();
    }, 
    getDictTreeData()
    {
      treeList()
        .then((response) => {
         this.dictTreeData =response.data;
        })
        .catch((err) => {
        
        });
    },
    /** 查询字典类型详细 */
    getType(dictId) {
      getType(dictId).then((response) => {
        this.queryParams.dictType = response.data.dictType;
        this.defaultDictType = response.data.dictType;
        this.getList();
      });
    },
    /** 查询字典类型列表 */
    getTypeList() {
      getDictOptionselect().then((response) => {
        this.typeOptions = response.data;
      });
    },
    clickTreeNode(data)
    {
      console.log("clickTreeNode",data);
      this.queryParams.parentId = data.id?data.id:-1;
      this.queryParams.path = data.path?data.path:null;
      if(!data.id)
      {
        this.queryParams.type = data.code;
      }
      else
      {
        this.queryParams.type=null;
      }
      
      this.handleQuery();
    },
    /** 查询字典数据列表 */
    getList() {
      // this.loading = true;
      tableListData(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id:null,
        parentId:null,
        parentName: undefined,
        name: undefined,
        code: undefined,
        sort: 0,
        status: "0",
        isSystem: "0",
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 返回按钮操作 */
    handleClose() {
      const obj = { path: "/system/dict" };
      this.$tab.closeOpenPage(obj);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.dictType = this.defaultDictType;
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(parent) {
      this.reset();
      this.open = true;
      this.title = "新增";
      //
      if(parent.id)
      {
        this.form.parentName = parent.name;
        this.form.parentId =parent.id;
      }
      else{
        this.form.type=parent.code;
        this.form.typeName=parent.name;
        this.form.parentName = parent.name;
        this.form.parentId =-1;
      }
     
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.parentId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate(data) {
      this.reset();
      getData(data.id).then((response) => {
        this.form = response.data;
        this.form.parentName = response.data.typeName;
        this.open = true;
        this.title = "编辑";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateData(this.form).then((response) => {
              // this.$store.dispatch(
              //   "dict/removeDict",
              //   this.queryParams.dictType
              // );
              this.$modal.msgSuccess("处理成功");
              this.open = false;
              this.getList();
              this.getDictTreeData();
            });
          } else {
            addData(this.form).then((response) => {
              // this.$store.dispatch(
              //   "dict/removeDict",
              //   this.queryParams.dictType
              // );
              this.$modal.msgSuccess("处理成功");
              this.open = false;
              this.getList();
              this.getDictTreeData();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(data) {      
      this.$modal
        .confirm('是否确认删除字典编"' + data.name + '"的数据项？')
        .then(function () {
          return delData(data.id);
        })
        .then(() => {
          this.getList();
          this.getDictTreeData();
          this.$modal.msgSuccess("删除成功");
       
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/dict/data/export",
        {
          ...this.queryParams,
        },
        `data_${new Date().getTime()}.xlsx`
      );
    },
  }
};
</script>


<style lang="scss" scoped>
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .dic-tree{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 8px #ccc;
    -min-height: calc(100vh - 107px);
    overflow: auto;
  }
.el-tree-ex {
  ::v-deep .is-current > .el-tree-node__content {
    background-color: #d1e0f1 !important;
    display:inline-flex;
    min-width:100%;
  }
}
</style>