ezhizao_yzbh_vue/src/views/business/entrust/workOrder/setEntrustDialog.vue

<template>
  <el-dialog
    title="设置委托"
    v-model="formOpen"
    width="900px"
    append-to-body
    draggable
    @close="cancel"
  >
    <el-form ref="dictRef" :model="form" label-width="100">
      <el-form-item label="受委托方：">
        <el-select placeholder="请选择受委托方" v-model="toTenantId">
          <el-option
            v-for="(item, index) in factories"
            :key="index"
            :label="item.accountName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="委托工单：">
        <el-table
          :data="list"
          size="small"
          border
          height="100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            label="客户名称"
            align="center"
            min-width="250"
            prop="companyName"
          />
          <el-table-column
            label="税号"
            align="center"
            prop="socialCreditCode"
            min-width="180"
          />
          <el-table-column
            label="工单类型"
            align="center"
            prop="amount"
            width="80"
          >
            <template #default="scope">
              {{ scope.row.type === 1 ? "循环工单" : "代办工单" }}
            </template>
          </el-table-column>
          <el-table-column
            label="项目"
            align="center"
            prop="taskTypeName"
            width="150"
          >
            <template #default="scope">
              {{ scope.row.taskTypeName }}
              {{
                scope.row.taskTypeDetailName
                  ? `-${scope.row.taskTypeDetailName}`
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="50">
            <template #default="scope">
              <el-button
                type="danger"
                size="small"
                link
                @click="delWorkOrderHandler(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Finished"
          size="small"
          @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel" icon="close" size="small">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  addEntrust,
  getFactories,
} from "@/api/business/entrust/currentWorkOrder";
import { ref } from "vue";

const { proxy } = getCurrentInstance();

const factories = ref([]);
const emit = defineEmits(["choice"]);

const toTenantId = ref(null);

const list = ref([]);

const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});

const { getList } = toRefs(props);
const currentMonth = ref(proxy.moment().format("YYYY-MM-01"));

const formOpen = ref(false);
const form = ref({});
const rules = ref({});
const content = ref("请输入员工姓名");
const ids = ref([]);

function submitForm() {
  if (toTenantId.value == null || toTenantId.value == "") {
    proxy.$modal.msgError("请选择受委托方!");
    return;
  }
  if (list.value.length == 0) {
    proxy.$modal.msgError("请选择要委托的工单!");
    return;
  }
  const entrust = {
    workMonth: currentMonth.value,
    toTenantId: toTenantId.value,
    workOrderIds: list.value.map((l) => l.id),
  };
  emit("submit", entrust);
  // addEntrust(entrust).then((response) => {
  //   proxy.$modal.msgSuccess("设置完成!");
  //   formOpen.value = false;
  //   cancel()
  //   getList.value()
  // });
}

function cancel() {
  formOpen.value = false;
  reset();
}

function open(options) {
  const { optionCurrentMonth, selections } = options;
  currentMonth.value = optionCurrentMonth;
  list.value = proxy.deepClone(selections);
  formOpen.value = true;
}

function delWorkOrderHandler(index) {
  proxy.$modal.confirm("是否确认删除选中的数据项？").then(() => {
    list.value.splice(index, 1);
  });
}

function reset() {
  list.value = [];
  currentMonth.value = proxy.moment().format("YYYY-MM-01");
  toTenantId.value = null;
}

function initFactories() {
  getFactories().then((res) => {
    factories.value = res.data;
  });
}
initFactories();
// 暴露给父组件的方法
defineExpose({
  open,
  cancel,
});
</script>