ezhizao_yzbh_vue/src/views/business/entrust/workOrder/nextMonth/index.vue

<template>
  <div class="page-container list-container">
    <!-- 功能按钮区 -->
    <div class="list-btns-container">
      <el-button type="primary" size="small" :disabled="multiple" icon="Plus" @click="setEntrustHandle"
        v-hasPermi="['business:entrust:workOrder:next:edit']">设置委托</el-button>
      <el-button type="danger" size="small" :disabled="cancel" icon="delete" @click="delEntrustHandle"
        v-hasPermi="['business:entrust:workOrder:next:edit']">取消委托</el-button>
      <el-dropdown trigger="click">
        <el-button type="primary" size="small">
          其它<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="Download" @click="handleExport"
              v-if="viewAdviser('business:entrust:workOrder:next:export')">
              导出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button style="margin-left: 5px;" type="primary" size="small" icon="Plus" @click="exportZero">导入委托</el-button>
    </div>
    <!-- 搜索区 -->
    <el-form class="list-search-container" size="small" :model="queryParams" ref="queryRef" :inline="true"
      label-width="68px">
      <el-form-item label="当前月：">{{
        moment().add(1, 'month').format("YYYY年MM月")
        }}</el-form-item>
      <el-form-item label="客户名称：" prop="companyName">
        <el-input v-model="queryParams.companyName" placeholder="请输入客户名称" style="width: 150px" clearable
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="执行人：" prop="toAccountName">
        <el-input v-model="queryParams.toAccountName" placeholder="请输入执行人" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表区 -->
    <el-table v-loading="loading" :data="list" size="small" border height="100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="工单号" align="center" prop="workOrderNo" width="200" /> -->
      <el-table-column label="客户名称" align="center" min-width="250" prop="companyName" >
        <template #default="scope">
          <div style="display: flex; align-items: center; ">
            <template v-if="scope.row.entrustExamine && scope.row.entrustExamine.status == 0">
              <el-tooltip content="等待取消委托确认" placement="top">
                <el-icon :size="15">
                 <Clock />
                </el-icon>
              </el-tooltip>
              <span style="padding-left:5px;">{{ scope.row.companyName }}</span>
            </template>
            <template v-else-if="scope.row.entrustExamine && scope.row.entrustExamine.status == 2">
              <el-tooltip :content="str+scope.row.entrustExamine.refuseReason" placement="top">
                <el-icon :size="15" color="#E22121">
                  <WarnTriangleFilled />
                </el-icon>
              </el-tooltip>
              <span style="padding-left:5px;">{{ scope.row.companyName }}</span>
            </template>
            <template v-else>
              <div style="width: 20px; height: 15px;"></div>
              <span>{{ scope.row.companyName }}</span>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="税号" align="center" prop="socialCreditCode" min-width="200" />
      <el-table-column label="工单类型" align="center" prop="amount" min-width="90">
        <template #default="scope">
          {{ scope.row.type === 1 ? "循环工单" : "代办工单" }}
        </template>
      </el-table-column>
      <el-table-column label="项目" align="center" prop="taskTypeName" min-width="130">
        <template #default="scope">
          {{ scope.row.taskTypeName }}
          {{
          scope.row.taskTypeDetailName
          ? `-${scope.row.taskTypeDetailName}`
          : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="起始月" align="center" min-width="90" prop="startMonth">
        <template #default="scope">
          {{
          scope.row.type === 1
          ? scope.row.startMonth
          ? moment(scope.row.startMonth).format("YYYY年MM月")
          : ""
          : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column label="结束月" align="center" min-width="90" prop="endMonth">
        <template #default="scope">
          {{
          scope.row.type === 1
          ? scope.row.endMonth
          ? moment(scope.row.endMonth).format("YYYY年MM月")
          : ""
          : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column label="工单月数" align="center" min-width="80" prop="monthNum">
        <template #default="scope">
          {{ scope.row.type === 1 ? scope.row.monthNum : "-" }}
        </template>
      </el-table-column>
      <el-table-column label="工单执行人" align="center" min-width="120">
        <template #default="scope">
          {{
          scope.row.entrust != null
          ? scope.row.entrust.toAccountName
          : scope.row.serviceName
          }}
        </template>
      </el-table-column>
    </el-table>
    <exports ref="exportRef" :get-list="getList"></exports>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <el-dialog title="取消委托" v-model="cancelEntrust" width="720px" append-to-body size="small" draggable
      :close-on-click-modal="false">
      <span style="font-size: 12px;">
        {{companyName}} 的服务工厂已经开始了，<br>需要工厂确认才可以取消，请填写取消理由
      </span>

      <el-form-item label="取消理由" prop="cancelReason" style="margin-top: 10px">
        <el-input v-model="form.cancelReason" type="textarea" placeholder="请输入取消理由" />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" icon="Finished" size="small" @click="submitForm">确 定</el-button>
          <el-button icon="close" size="small" @click="cancelEntrust = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <init-month-dialog ref="initMonthDialogRef" :get-list="getList" :setCurrentMonth="setCurrentMonth" />
    <set-entrust-dialog ref="setEntrustDialogRef" :get-list="getList" @submit="handleAddEntrust" />
  </div>
</template>

<script setup name="NextMonthWorkOrder">
  import InitMonthDialog from "../initMonthDialog";
  import exports from "./export.vue"
  import {
    listNextWorkORder,
    checkCurrent,
    exportNextWorkOrder,
    delEntrust,
    addEntrust,
  } from "@/api/business/entrust/nextWorkOrder";
  import { exportNextStore ,saveExamine} from "@/api/business/entrust/currentWorkOrder";
  import SetEntrustDialog from "../setEntrustDialog";
  import useUserStore from "@/store/modules/user";
  const { proxy } = getCurrentInstance();
  const currentMonth = ref(null);
  /** 字典数组区 */
  /** 查询 对象 */

  const list = ref([]);
  const loading = ref(true);
  const ids = ref([]);
  const selections = ref([]);
  const single = ref(false);
  const cancel = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const prev = ref([]);
  const permissions = useUserStore().permissions;
  const all_permission = "*:*:*";
  const companyName = ref(null);
  const str = ref("拒绝取消委托，原因：")
  const form = ref({});
  const initMonthDialogRef = ref(null);
  const setEntrustDialogRef = ref(null);
  const cancelEntrust = ref(false);
  const showInitMonth = ref(false);

  const { contract_verify_status } = proxy.useDict("contract_verify_status");
  const { contract_status } = proxy.useDict("contract_status");
  /** 查询对象 */
  const queryParams = ref({
    pageNum: 1,
    pageSize: 20,
    companyName: "",
    orderByColumn: "create_time",
    noContract: 0,
    type: 1,
  });

  const editStatus = {
    startMonth: false,
  };
  onActivated(() => {
    // 你的逻辑
    getList();
  });
  function checkCurrentMonthHandle() {
    checkCurrent().then((res) => {
      if (res.data.checkResult === true) {
        setCurrentMonth(res.data.currentMonth);
        getList();
      } else {
        proxy.$modal.msgError("未设置当前月，请设置本月");
      }
    });
  }
  function submitForm() {
    if (form.value.cancelReason == undefined || form.value.cancelReason == "") {
      proxy.$modal.msgError("请输入取消原因");
    }
    form.value.workMonth  =  currentMonth.value,
    form.value.nextFlag = 1
    loading.value = true;
    saveExamine(form.value).then((res) => {
      proxy.$modal.msgSuccess("取消成功");
      cancelEntrust.value = false
      getList();
    }).finally(() => {
      loading.value = false;
    })
  }
  //判断是否有权限
  function viewAdviser(quer) {
    return permissions.includes(all_permission) || permissions.includes(quer);
  }
  /** 新增导入操作 */
  function exportZero() {
    proxy.$refs.exportRef.open();
  }
  function showInitMonthDialog() {
    initMonthDialogRef.value.open();
  }

  /***********************  方法区  ****************************/

  /** 查询company列表 */
  function getList() {
    loading.value = true;
    queryParams.value.currentMonth = currentMonth.value;
    listNextWorkORder(queryParams.value).then((response) => {
      list.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    selections.value = selection;

    //取消委托计数
    let cancelNum = 0;
    //设置委托计数
    let multipleNum = 0;
    //判断是否有执行人
    selections.value.forEach((item) => {
      if (item.entrust) {
        //有执行人
        if (item.entrust.toAccountName) {
          cancelNum++;
        }
      }
      //没有执行人
      if (!item.entrust) {
        multipleNum++;
      }
    });

    //判断是否有选中数据
    if (!selections.value.length > 0) {
      multiple.value = true;
      cancel.value = true;
    } //判断是否设置执行人和设置委托选中
    else if (cancelNum > 0 && multipleNum > 0) {
      cancel.value = cancelNum > 0;
      multiple.value = multipleNum > 0;
    } else {
      cancel.value = !cancelNum > 0;
      multiple.value = !multipleNum > 0;
    }
  }

  /** 导出按钮操作 */
  function handleExport() {
    exportNextStore(queryParams.value);
  }

  function setCurrentMonth(month) {
    // currentMonth.value = month;
    currentMonth.value = proxy.moment().add(1, 'month').format("YYYY-MM") + "-01";
  }

  function setEntrustHandle() {
    setEntrustDialogRef.value.open({
      selections: selections.value,
      optionCurrentMonth: currentMonth.value,
    });
  }

  function delEntrustHandle() {
    const entrust = {
      workMonth: currentMonth.value,
      workOrderIds: ids.value,
    };
    // proxy.$modal.confirm("是否确认取消委托？").then(() => {
    //   delEntrust(entrust).then((res) => {
    //     proxy.$modal.msgSuccess("取消成功");
    //     getList();
    //   });
    // });
    proxy.$modal.confirm("是否确认取消委托？").then(() => {
      loading.value = true; // 
      delEntrust(entrust).then((res) => {
        if (res.data != null) {
          companyName.value = res.data.companyName
          form.value.workOrderIds = res.data.workOrderIds
          // res.data.com
          cancelEntrust.value = true;
        } else {
          proxy.$modal.msgSuccess("取消成功");
          getList();
        }
        loading.value = false;
      }).catch(() => {

      }).finally(() => {
        loading.value = false; // 确保在请求完成时也关闭加载状态
      })
    });
  }

  function handleAddEntrust(data) {
    addEntrust(data).then((response) => {
      proxy.$modal.msgSuccess("设置完成!");
      setEntrustDialogRef.value.cancel();
      getList();
    });
  }

  checkCurrentMonthHandle();
</script>