WZC2/fe/PC/src/views/systemManage/Department.vue

<template>
  <div class="page-box" v-loading="Loading.appMainLoading">
    <tablePagination
      :currenButtonData="currenButtonData"
      :tableData="tableData"
      :tableLoading="Loading.tableLoading"
      :tableColumns="tableColumns"
      @rowDrop="rowDrop"
      :totalCount="totalCount"
      :multipleSelection="multipleSelection"
      :MaxResultCount="PageListParams.MaxResultCount"
      @topbutton="topbutton"
      @inlineDialog="inlineDialog"
      @sortChange="sortChange"
      @alertoldSkipCount="alertoldSkipCount"
      @alterResultCount="alterResultCount"
      @handleSelectionChange="handleSelectionChange"
      :currentPageProps="oldSkipCount"
      :quicklySearchOption="quicklySearchOption"
      @quicklySearchClick="quicklySearchClick"
      @quicklySearchClear="quicklySearchClear"
      :primarySearchOption="primarySearchOption"
      @overallSearchFormClick="overallSearchFormClick"
      :httpOverallSearchData="httpOverallSearchData"
    >
    </tablePagination>
    <!-- 新增与编辑 -->
    <newAndEdiDialog
      :loading="Loading.newAndEdiLoading"
      :active="active"
      :pageStatus="pageStatus"
      :formReveal="formReveal"
      :formTitle="formTitle"
      :displayDialog="editDialog"
      :FormData="formReveal ? CreateFormData : editFormData"
      :Form="formReveal ? CreateForm : editForm"
      :Options="editOptions"
      :Handle="editHandle"
      :Rules="formReveal ? editRules.cerateRule : editRules.editRule"
      @FormSubmit="FormSubmit"
      @close="FormClose"
      @goBack="goBack"
    ></newAndEdiDialog>
    <curren-Drawer
      :title="tableColumns"
      :tableColumns="tableColumns"
      :DrawerLoading="Loading.DrawerLoading"
      :drawer="displayDialog.detailsDialog"
      :dropdownData="dropdownData"
      :propsData="propsData"
      :tabsDesTions="tabsDesTions"
      @drawerShut="(val) => (displayDialog.detailsDialog = val)"
      @drawerbutton="drawerbutton"
      @handleCommand="drawerHandle"
      @close-value="closeValue"
    ></curren-Drawer>
  </div>
</template>
<script>
import { departmentList, getDetailed, authCreate, authUpdate, authDelete } from "@/api/wms-auth"
import { tableMixins } from "@/mixins/TableMixins"
import { LoadingMixins } from "@/mixins/LoadingMixins"
import { drawerMixins } from "@/mixins/drawerMixins"
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins"
import { newAndEdiDialogMixins } from "@/mixins/newAndEdiDialogMixins"
import { mixins } from "@/mixins/mixins"
export default {
  name: "Department",
  mixins: [
    tableMixins,
    LoadingMixins,
    drawerMixins,
    TableHeaderMixins,
    mixins,
    newAndEdiDialogMixins
  ],
  computed: {
    editDialog: {
      get: function () {
        return this.displayDialog.newDialog || this.displayDialog.editDialog;
      },
    },
  },
  data () {
    return {
      URL: 'auth/department',
      //常用按钮数据
      currenButtonData: [
        this.defaultAddBtn(),//新增
        this.defaultFieldSettingBtn(),//字段设置
        this.defaultFreshBtn(),//刷新
        this.defaultFilterBtn(),//筛选
      ],
      //新增
      CreateFormData: {
        remark: null,
        code: null,
        name: null,
        description: null,
        company: localStorage.getItem("company")
      },
      //编辑
      editFormData: {
        remark: null,
        code: null,
        name: null,
        description: null,
        concurrencyStamp: null,
      },
      editOptions: {},
      CreateForm: [
        { type: "input", label: "部门代码", prop: 'code', colSpan: 12 },
        { type: "input", label: "部门名称", prop: "name", colSpan: 12 },
        { type: "input", label: "描述", prop: "description", colSpan: 12 },
        { type: "input", label: "备注", prop: 'remark', colSpan: 12 },
      ],
      editForm: [
        { type: "input", label: "部门代码", prop: 'code', disabled:true, colSpan: 12 },
        { type: "input", label: "部门名称", prop: "name", disabled:true, colSpan: 12 },
        { type: "input", label: "描述", prop: "description", colSpan: 12 },
        { type: "input", label: "备注", prop: 'remark', colSpan: 12 },
      ],
      editRules: {
        cerateRule: {
          code: [{ required: true, trigger: "blur", message: "不可为空" }],
          name: [{ required: true, trigger: "blur", message: "不可为空" }],
        },
        editRule: {}
      },
    };
  },
  mounted () {
    this.paging();
  },
  methods: {
    //渲染数据
    paging() {
      this.Loading.tableLoading = true;
      this.PageListParams.SkipCount = (this.oldSkipCount - 1) * this.PageListParams.MaxResultCount,
      departmentList(this.PageListParams, this.URL).then(res => {
          this.tableData = res.items
          this.totalCount = res.totalCount
          this.pagingCallback()
        }).catch(err => {
          this.Loading.tableLoading = false
        })
    },
    //点击Table行内名称
    inlineDialog(val) {
      //打开抽屉
      this.Loading.DrawerLoading = true
      this.displayDialog.detailsDialog = true;
      getDetailed(val.id, '/' + this.URL + '/')
        .then(res => {
          if (res.details) {
            // 前端分页处理
            this.tableDataDetails = JSON.parse(JSON.stringify(res))
            let linshiTableDataDetails = JSON.parse(JSON.stringify(this.tableDataDetails))
            this.totalCountDetails = res.details.length
            // 删除除当前页面最大数以外数据
            linshiTableDataDetails.details.splice(this.MaxResultCountDetails,this.totalCountDetails); 
            this.propsData = linshiTableDataDetails
          } else {
            this.propsData = res
          }
          this.inlineDialogCallback()
        })
        .catch(err => {
          this.Loading.DrawerLoading = false
        })
    },
    //提交表单
    FormSubmit(val) {
      this.ref = val
      this.Loading.newAndEdiLoading = true
      switch (this.formReveal) {
        case true:
          authCreate(this.CreateFormData, this.URL).then(res => {
            this.oldSkipCount = 1;
            this.Loading.newAndEdiLoading = false
            this.FormResult("success")
          }).catch(err => {
            this.Loading.newAndEdiLoading = false
            this.FormResult("error")
          })
          break;
        case false:
          authUpdate(this.editFormData, this.propsData.id, this.URL).then(res => {
            this.propsData = res
            this.Loading.newAndEdiLoading = false
            this.FormResult("success")
          }).catch(err => {
            this.Loading.newAndEdiLoading = false
            this.FormResult("error")
          })
      }
    },
    //抽屉下拉按钮操作
    async drawerHandle(val) {
      if (val == 'delete') {
        this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.Loading.appMainLoading = true
          this.displayDialog.detailsDialog = false
          authDelete(this.propsData.id, this.URL).then(res => {
            this.$successMsg('删除成功!')
            this.Loading.appMainLoading = false
            this.paging()
          }).catch(err => {
            this.Loading.appMainLoading = false
          })
        }).catch(() => {

        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/basicData.scss";
</style>