integrated_traffic_vue/src/views/workforce_management/index.vue

<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="50px"
        @submit.prevent="fnResetPaginationTransfer"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="名称" prop="KEYWORDS">
              <el-input v-model="searchForm.KEYWORDS" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPaginationTransfer">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        :data="list"
        @get-data="fnGetDataTransfer"
        v-model:pagination="pagination"
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template v-slot="{ row }">
            <el-button
              v-if="parentId === '0'"
              link
              type="primary"
              @click="
                router.push({
                  path: '/workforce_management',
                  query: {
                    parentId: row.SHIFTWORKRULES_ID,
                  },
                })
              "
            >
              {{ row.NAME }}<el-icon><ArrowRight /></el-icon>
            </el-button>
            <span v-else>{{ row.NAME }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              text
              link
              v-if="parentId !== '0'"
              @click="fnView(row.SHIFTWORKRULES_ID)"
            >
              详情
            </el-button>
            <el-button
              v-if="buttonJurisdiction.edit"
              type="primary"
              text
              link
              @click="fnAddOrEdit(row.SHIFTWORKRULES_ID, 'edit')"
            >
              编辑
            </el-button>
            <el-button
              v-if="buttonJurisdiction.del"
              type="primary"
              text
              link
              @click="fnDelete(row.SHIFTWORKRULES_ID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button
            v-if="buttonJurisdiction.add"
            type="primary"
            @click="fnAddOrEdit('', 'add')"
          >
            新增
          </el-button>
          <el-button v-if="parentId !== '0'" @click="router.back">
            返回
          </el-button>
        </template>
      </layout-table>
    </layout-card>
    <view-info
      :period-list="data.viewDialog.periodList"
      :info="data.viewDialog.info"
      v-model:visible="data.viewDialog.visible"
    />
    <add-one
      v-model:visible="data.addOrEditOneDialog.visible"
      v-model:form="data.addOrEditOneDialog.form"
      :type="data.addOrEditOneDialog.type"
      @get-data="fnResetPaginationTransfer"
    />
    <add-two
      v-model:visible="data.addOrEditTwoDialog.visible"
      v-model:form="data.addOrEditTwoDialog.form"
      :type="data.addOrEditTwoDialog.type"
      :parent-id="parentId"
      @get-data="fnResetPaginationTransfer"
    />
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import LayoutTable from "@/components/table/index";
import { serialNumber } from "@/assets/js/utils";
import LayoutCard from "@/components/card/index.vue";
import {
  getWorkforceManagementIsUse,
  getWorkforceManagementList,
  getWorkforceManagementView,
  setWorkforceManagementDeleteOne,
  setWorkforceManagementDeleteTwo,
} from "@/request/workforce_management.js";
import { ArrowRight } from "@element-plus/icons-vue";
import useListData from "@/assets/js/useListData.js";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import ViewInfo from "./components/view.vue";
import AddOne from "./components/add_one.vue";
import AddTwo from "./components/add_two.vue";

const router = useRouter();
const route = useRoute();
const parentIdDefault = "0";
const parentId = ref(route.query.parentId || parentIdDefault);
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
  useListData(getWorkforceManagementList, {
    otherParams: {
      PARENTID: parentId.value,
    },
  });
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
    periodList: [],
  },
  addOrEditOneDialog: {
    visible: false,
    type: "",
    form: {
      NAME: "",
    },
  },
  addOrEditTwoDialog: {
    visible: false,
    type: "",
    form: {
      NAME: "",
      ISCUSTOM: "0",
      periodList: [],
    },
  },
});
const fnGetDataTransfer = () => {
  fnGetData({
    PARENTID: parentId.value,
  });
};
const fnResetPaginationTransfer = () => {
  fnResetPagination({
    PARENTID: parentId.value,
  });
};
onBeforeRouteUpdate((to) => {
  parentId.value = to.query.parentId || parentIdDefault;
  fnResetPaginationTransfer();
});
const buttonJurisdiction = await useButtonJurisdiction("shiftworkrules");
const fnDelete = debounce(
  1000,
  async (SHIFTWORKRULES_ID) => {
    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
    let resData = {};
    if (parentId.value === "0")
      resData = await setWorkforceManagementDeleteOne({
        SHIFTWORKRULES_ID,
      });
    else
      resData = await setWorkforceManagementDeleteTwo({
        SHIFTWORKRULES_ID,
      });
    if (resData.type === "success") {
      ElMessage.success("删除成功");
      fnResetPaginationTransfer();
    }
    if (resData.type === "error")
      ElMessage.error(
        parentId.value === "0"
          ? "该类型还有下级类型，无法删除"
          : "该类型还在使用中，无法删除"
      );
  },
  { atBegin: true }
);
const fnView = async (SHIFTWORKRULES_ID) => {
  const resData = await getWorkforceManagementView({ SHIFTWORKRULES_ID });
  data.viewDialog.info = resData.pd;
  data.viewDialog.periodList = resData.periodList;
  data.viewDialog.visible = true;
};
const fnAddOrEdit = async (SHIFTWORKRULES_ID, type) => {
  if (parentId.value === "0") {
    data.addOrEditOneDialog.visible = true;
    await nextTick();
    data.addOrEditOneDialog.type = type;
    if (type === "edit") {
      const resData = await getWorkforceManagementView({ SHIFTWORKRULES_ID });
      data.addOrEditOneDialog.form = resData.pd;
    }
  } else {
    data.addOrEditTwoDialog.visible = true;
    await nextTick();
    data.addOrEditTwoDialog.type = type;
    data.addOrEditTwoDialog.form.periodList = [];
    if (type === "edit") {
      const resData = await getWorkforceManagementIsUse({ SHIFTWORKRULES_ID });
      if (resData.type === "success") {
        const resData = await getWorkforceManagementView({ SHIFTWORKRULES_ID });
        data.addOrEditTwoDialog.form = resData.pd;
        data.addOrEditTwoDialog.form.periodList = resData.periodList;
      }
      if (resData.type === "error") {
        ElMessage.error("该类型还在使用中，无法编辑");
        data.addOrEditTwoDialog.visible = false;
      }
    }
  }
};
</script>

<style scoped></style>