duty-management-web/src/views/system/dict-manage/index.vue

<template>
  <div class="__normal-page">
    <div class="__normal-tree" v-loading="loadingTree">
      <div class="tree-filter">
        <CusFormColumn
            :span="24"
            v-model:param="treeFilter">
          <template #suffix>
            <SvgIcon name="search"/>
          </template>
        </CusFormColumn>
      </div>
      <div class="tree-content">
        <template v-for="p in dictTree">
          <div class="tree-parent __hover" :class="{active: p.expend}" @click="p.expend = !p.expend">{{p.name}}</div>
          <template v-if="p.expend">
            <template v-for="s in p.children?.filter(v => v.name.includes(treeFilter))">
              <div class="tree-son __hover" :class="{active: selectDict === s.value}" @click="handleTreeClick(s.value)">{{s.name}}</div>
            </template>
          </template>
        </template>
      </div>
    </div>
    <div class="__normal-content" v-if="selectDict">
      <CusContent
          v-model:tableHead="tableHead"
          @handleReset="handleReset"
          @handleSearch="onSearch"
      >
        <template #fieldOut>
          <CusForm labelWidth="120px" @handleEnter="onSearch">
            <CusFormColumn
                :span="8"
                label="字典显示名称:"
                v-model:param="queryForm.dictLabel"/>
            <CusFormColumn
                :span="8"
                label="字典值内容:"
                v-model:param="queryForm.dictValue"/>
            <CusSearchButtons
                @handleReset="handleReset"
                @handleSearch="onSearch"
            />
          </CusForm>
        </template>
        <template #buttons>
          <div class="__cus-button_submit __hover" @click="onAdd">
            <SvgIcon name="add" size="16"/>新增
          </div>
        </template>
        <template #table>
          <CusTable
              v-loading="loading"
              ref="ref_cusTable"
              :tableData="queryResult.tableData"
              :tableHead="tableHead"
              :total="queryResult.total"
              :page="queryPage.pageNum"
              :pageSize="queryPage.pageSize"
              @handlePage="handlePage"
          >
            <template #updateTime-column-value="{ scope }">
              {{$util.YMDHms(scope.row.updateTime)}}
            </template>
            <template #do-column-value="{ scope }">
              <div class="__cus-table_do">
                <div class="__cus-table_do-green __hover" @click="onView(scope.row)">
                  <SvgIcon name="view" size="16"/>查看
                </div>
                <div class="__cus-table_do-blue __hover" @click="onEdit(scope.row)">
                  <SvgIcon name="edit" size="16"/>编辑
                </div>
                <div class="__cus-table_do-red __hover" @click="onDel(scope.row)">
                  <SvgIcon name="del" size="16"/>删除
                </div>
              </div>
            </template>
          </CusTable>
        </template>
      </CusContent>
    </div>
    <DetailCom v-model:show="showDetail" :transfer="transfer" @refresh="handleSearch()"/>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import DetailCom from './detail.vue'
import { ElMessage, ElMessageBox } from 'element-plus';

export default defineComponent({
  name: '',
  components: {
    DetailCom
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      //  加载中
      loading: false,
      //  查询分页参数
      queryPage: {
        pageNum: 1,
        pageSize: 10
      },
      //  查询结果
      queryResult: {
        total: 0,
        tableData: []
      },
      //  查询表单参数
      queryForm: <any>{},
      //  查询表单参数备份
      back_queryForm: {},
      //  表格表头
      tableHead: [
        {value: "dictLabel", label: "字典显示名称", show: true},
        {value: "dictValue", label: "字典值内容", show: true},
        {value: "dictSort", label: "排序", show: true},
        {value: "updateTime", label: "更新时间", show: true, width: 180},
        {value: "do", label: "操作", show: true, popover: true, width: 260},
      ],
      showDetail: false,
      transfer: {},
      treeFilter: '',
      dictTree: [],
      loadingTree: false,
      selectDict: ''
    });
    const ref_cusTable = ref()
    //  获取字典
    const initDictionary = () => {
    }
    //  查询分页参数改变处理方法
    const handlePage = ({page, pageSize}: any) => {
      state.queryPage.pageNum = page
      state.queryPage.pageSize = pageSize
      handleSearch(page, pageSize)
    }
    //  重置查询表单方法
    const handleReset = () => {
      state.queryForm = {}
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      handleSearch()
    }
    //  查询方法
    const handleSearch = (page = 1, pageSize = 10) => {
      //  添加分页参数
      const queryParams: any = {
        pageNum: page,
        pageSize: pageSize,
        dictType: state.selectDict
      }
      //  添加表单参数
      for (const [k, v] of Object.entries(state.back_queryForm)) {
        that.$util.isValue(v) ? (queryParams[k] = v) : null;
      }
      state.loading = true
      that.$api.getDictDataList(that.$util.formatGetParam(queryParams)).then((res: any) => {
        if (res.code === 200) {
          state.queryResult.tableData = res.rows
          state.queryResult.total = res.total
        } else {
          ElMessage.error(res.message)
        }
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
    }
    //  点击查询按钮后
    const onSearch = () => {
      ref_cusTable.value.resetFilter()
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      state.queryPage.pageNum = 1
      handleSearch()
    }
    const onAdd = () => {
      state.transfer = {
        method: 'add',
        dictType: state.selectDict
      }
      state.showDetail = true
    }
    const onEdit = (val) => {
      state.transfer = {
        method: 'edit',
        detail: JSON.parse(JSON.stringify(val)),
        dictType: state.selectDict
      }
      state.showDetail = true
    }
    const onView = (val) => {
      state.transfer = {
        method: 'view',
        detail: JSON.parse(JSON.stringify(val))
      }
      state.showDetail = true
    }
    const initTree = () => {
      state.loadingTree = true
      state.dictTree = []
      that.$api.getDictTypeTreeSelectTree().then(res => {
        if (res.code === 200) {
          state.dictTree = res.data.map((p) => {
            p.expend = false
            p.name = p.label
            p.value = p.attachedField
            if (p.children?.length > 0) {
              p.children = p.children.map(c => {
                c.name = c.label
                c.value = c.attachedField
                return c
              })
            }
            return p
          })
        } else {
          ElMessage.error(res.message)
        }
        state.loadingTree = false
      }).catch(() => {
        state.loadingTree = false
      })
    }
    const handleTreeClick = (val) => {
      state.selectDict = val
      handleSearch()
    }
    const onDel = (val) => {
      ElMessageBox.confirm(`是否删除${val.dictLabel}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        state.loading = true
        that.$api.delDictData(val.id).then(res => {
          if (res.code === 200) {
            ElMessage.success(res.message)
            handleSearch()
          } else {
            ElMessage.error(res.message)
            state.loading = false
          }
        }).catch(() => {
          state.loading = false
        })
      }).catch(() => {})
    }
    onMounted(() => {
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      initDictionary()
      initTree()
    })
    return {
      ref_cusTable,
      ...toRefs(state),
      handleSearch,
      handlePage,
      handleReset,
      onSearch,
      onAdd,
      onEdit,
      onView,
      handleTreeClick,
      onDel
    }
  },
})
</script>

<style scoped lang="scss">
.__normal-tree {
  width: 224px;
  margin-right: 24px;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .tree-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tree-parent {
      background-image: url("./dict_bg.png");
      width: 188px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(46,184,255,0.6);
      margin-bottom: 10px;
      &.active {
        background-image: url("./dict_bg-active.png");
        width: 196px;
        height: 54px;
        color: #3EFFBB;
        text-shadow: 0px 0px 4px rgba(62,255,187,0.1);
      }
    }
    .tree-son {
      font-size: 18px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      text-shadow: 0px 0px 4px rgba(62,255,187,0.1);
      margin-bottom: 10px;
      align-self: flex-start;
      padding-left: 76px;
      &.active {
        color: #3EFFBB;
      }
    }
  }
}
</style>