vue-insagent-pc/src/views/Sys/Dict.vue

<template>
  <div class="container" style="width: 99%; margin-top: 0px">
    <!--布局容器-->
    <el-container style="height: 100%" direction="vertical">
      <el-main style="padding: 0px">
        <Split :gutterSize="2" style="height: calc(100vh - 120px)">
          <SplitArea :size="20">
            <kt-button
              icon="fa fa-plus"
              label="新增分类"
              perms="sys:dict:add"
              type="primary"
              @click="handleAddType"
              v-show="true"
            />

            <tree
              :setting="ztreeSetting"
              :nodes="ztreeNodes"
              @onClick="onZTreeClick"
            />
          </SplitArea>
          <SplitArea :size="80">
            <!--工具栏-->
            <div
              class="toolbar"
              style="float: left; padding-top: 10px; padding-left: 15px"
            >
              <el-form :inline="true" :model="filters" :size="size">
                <!-- <el-form-item>
          <el-input v-model="filters.label" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:dict:view" type="primary" @click="findPage(null)"/>
        </el-form-item> -->
                <el-form-item>
                  <kt-button
                    style="background-color: #52c578; border: #52c578"
                    icon="fa fa-plus"
                    :label="$t('action.add')"
                    perms="sys:dict:add"
                    type="primary"
                    @click="handleAdd"
                  />
                </el-form-item>
              </el-form>
            </div>
            <!--表格内容栏-->
            <kt-table
              :height="350"
              permsEdit="sys:dict:edit"
              permsDelete="sys:dict:delete"
              :data="pageResult"
              :columns="columns"
              @findPage="findPage"
              @handleEdit="handleEdit"
              @handleDelete="handleDelete"
            >
            </kt-table>
          </SplitArea>
        </Split>
      </el-main>
    </el-container>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation ? '新增' : '编辑'"
      width="40%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <el-form
        :model="dataForm"
        label-width="80px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input
            v-model="dataForm.id"
            :disabled="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="label">
          <el-input v-model="dataForm.label" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="dataForm.value" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="itemname" v-show="false">
          <el-input v-model="dataForm.itemname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="dataForm.sort" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述 " prop="description">
          <el-input
            v-model="dataForm.description"
            auto-complete="off"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="dataForm.remarks"
            auto-complete="off"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="editDialogVisible = false">{{
          $t("action.cancel")
        }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="字典类型"
      width="80%"
      :visible.sync="editNewTypeDialogVisible"
      v-dialogDrag
    >
      <el-form
        :model="dictTypeForm"
        label-width="120px"
        :rules="dictTypeFormRules"
        ref="dictTypeForm"
        :size="size"
      >
        <el-form-item label="ID" prop="id" v-if="true">
          <el-input
            v-model="dictTypeForm.id"
            :disabled="false"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父ID" prop="parentId" v-if="true">
          <el-input
            v-model="dictTypeForm.parentId"
            :disabled="false"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="条目名称" prop="name">
          <el-input v-model="dictTypeForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="条目英文名称" prop="itemname">
          <el-input
            v-model="dictTypeForm.itemname"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="editNewTypeDialogVisible = false"
          >取消</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitTypeForm"
          :loading="editLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import tree from "@/components/ztree.vue";

export default {
  components: {
    tree,
    KtTable,
    KtButton,
  },
  mounted() {
    this.findLeftTreeData();
  },
  data() {
    return {
      //--分类 begin
      dictTypeForm: {
        id: "",
        parentId: "",
        name: "",
        itemname: "",
      },
      dictTypeFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      //--分类 end
      //----ztree begin---------
      ztreeObj: null,
      ztreeSetting: {
        check: {
          enable: false,
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "parentId",
          },
        },
        view: {
          showIcon: false,
          //addHoverDom: this.addHoverDom,
          //removeHoverDom: this.removeHoverDom
        },
      },
      ztreeNodes: [],
      currentTreeNode: null,

      //----ztree end---------

      size: "small",
      filters: {
        label: "",
      },
      columns: [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "label", label: "名称", minWidth: 100 },
        { prop: "value", label: "值", minWidth: 100 },
        { prop: "itemname", label: "类型", minWidth: 80 },
        { prop: "sort", label: "排序", minWidth: 80 },
        { prop: "description", label: "描述", minWidth: 120 },
        { prop: "remarks", label: "备注", minWidth: 120 },
        { prop: "createBy", label: "创建人", minWidth: 100 },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120,
          formatter: this.dateFormat,
        },
        // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
        // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      operType: "ADD", //'ADD','EDIT'
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editNewTypeDialogVisible: false, //新增编辑字典类型界面是否显示
      editLoading: false,
      dataFormRules: {
        label: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      // 新增编辑界面数据
      dataForm: {
        id: 0,
        label: "",
        value: "",
        itemname: "",
        sort: 0,
        description: "",
        remarks: "",
      },
    };
  },
  methods: {
    // 获取分页数据
    findPage: function (data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest.columnFilters = {
        label: { name: "label", value: this.filters.label },
      };
      this.$api.dict
        .findPage(this.pageRequest)
        .then((res) => {
          this.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
    // 批量删除
    handleDelete: function (data) {
      this.$api.dict
        .batchDelete(data.params)
        .then(data != null ? data.callback : "");
    },
    // 显示新增界面
    handleAdd: function () {
      console.log(this.currentTreeNode)
      if (!this.currentTreeNode || !this.currentTreeNode.itemname) {
        alert("请选择字典类型。");
        return;
      }
      this.editDialogVisible = true;
      this.operation = true;
      this.operType = "ADD";
      this.dataForm = {
        id: 0,
        label: "",
        value: "",
        itemname: "",
        sort: 0,
        description: "desc",
        remarks: "remark",
      };
      this.dataForm.itemname = this.currentTreeNode.itemname;
    },
    // 显示编辑界面
    handleEdit: function (params) {
      this.editDialogVisible = true;
      this.operType = "EDIT";
      this.operation = false;
      this.dataForm = Object.assign({}, params.row);
    },
    // 编辑
    submitForm: function () {
      let that = this;
      that.$refs.dataForm.validate((valid) => {
        if (valid) {
          that.$confirm("确认提交吗？", "提示", {}).then(() => {
            that.editLoading = true;
            let params = Object.assign({}, that.dataForm);
            if (that.operType === "ADD") {
              that.$api.dict.add(params).then((res) => {
                if (res.code == 200) {
                  that.$message({ message: "操作成功", type: "success" });
                } else {
                  that.$message({
                    message: "操作失败, " + res.msg,
                    type: "error",
                  });
                }
                that.editLoading = false;
                that.$refs["dataForm"].resetFields();
                that.editDialogVisible = false;
                that.findPage(null);
              });
            } else if (that.operType === "EDIT") {
              that.$api.dict.edit(params).then((res) => {
                if (res.code == 200) {
                  that.$message({ message: "操作成功", type: "success" });
                } else {
                  that.$message({
                    message: "操作失败, " + res.msg,
                    type: "error",
                  });
                }
                that.editLoading = false;
                that.$refs["dataForm"].resetFields();
                that.editDialogVisible = false;
                that.findPage(null);
              });
            }
          });
        }
      });
    },
    //分类的编辑--begin---
    submitTypeForm: function () {
      this.$refs.dictTypeForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            console.log(this);
            this.editLoading = true;
            let params = Object.assign({}, this.dictTypeForm);
            this.$api.dict.savetype(params).then((res) => {
              if (res.code == 200) {
                this.$message({ message: "操作成功", type: "success" });
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
              this.editLoading = false;
              this.$refs["dictTypeForm"].resetFields();
              this.editDialogVisible = false;
              this.findPage(null);
            });
          });
        }
      });
    },
    //分类的编辑--end---

    //--tree begin-------
    // 获取数据
    findLeftTreeData: function () {
      //this.loading = true;
      this.$api.dict.findLeftDictTree().then((res) => {
        console.log(res);
        //simpleData = res.data
        this.ztreeNodes = res.data;
        //this.loading = false;
      });
    },

    onZTreeClick: function (evt, treeId, treeNode) {
      // 点击事件
      console.log(evt.type, treeNode);
      this.currentTreeNode = treeNode;

      //this.filters.id = this.currentTreeNode.id;
      this.filters.label = this.currentTreeNode.itemname;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    onCheck: function (evt, treeId, treeNode) {
      // 选中事件
      console.log(evt.type, treeNode);
    },
    handleCreated: function (ztreeObj) {
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },
    onZTreeRightClick: function () {
      //alert("haha onZTreeRightClick");
    },
    //-- tree end-------
    //-- add begin -----
    handleAddType: function () {
      this.editNewTypeDialogVisible = true;
    },
    //-- add end -------
    // 时间格式化
    dateFormat: function (row, column, cellValue, index) {
      return format(row[column.property]);
    },
  },
};
</script>

<style scoped>
.form {
  /*width: 1170px;
      margin: 100px auto 0;*/
  margin: 2px 10px 0;
}
.FormContainer {
  border-left: 1px solid #ddd;
}
.FormTitle {
  border-left: 0px;
}
</style>