SPDM/src/tenants/lyric/views/task/components/createWorkTime.vue

<template>
  <Dialog
    v-model="dialogVisible"
    diaTitle="报工条目"
    width="80%"
    height="80%"
    @close="closeFun"
    show-footer
  >
    <BaseTable
      ref="tableRef"
      :api="disposeQueryWorkApi"
      :params="{ taskId: taskInfo.uuid }"
      showIndex
      tableName="CREATE_WORK_TIME"
      :actionList="actionList"
      full-height
    >
      <template #leftOptions>
        <el-button
          v-if="operateType === 'addWork'"
          icon="plus"
          type="primary"
          @click="visibleDialogFun"
          >新增报工</el-button
        >
      </template>
      <template #workName="{ row }">
        {{ row.workName ? row.workName : taskInfo.workName }}
      </template>
      <template #shouldProgress="{ row }">
        {{ TASK_PROGRESS_STATUS.O[row.shouldProgress] }}
      </template>
      <template #actualProgress="{ row }">
        {{ TASK_PROGRESS_STATUS.O[row.actualProgress] }}
      </template>
      <template #owner="{ row }">
        {{ disposeMemberList(row, 'ownerValue') }}
      </template>
    </BaseTable>
    <template #footer>
      <div>
        <el-button @click="closeFun">取消</el-button>
        <el-button type="primary" @click="closeFun">确定</el-button>
      </div>
    </template>
  </Dialog>
  <Dialog
    v-model="addOrEditVisible"
    :diaTitle="isEdit ? '编辑报工' : '新增报工'"
    width="400"
    height="400"
    @close="closeAddOrEditFun"
    show-footer
  >
    <TableForm
      ref="tableFormRef"
      :hideKeys="hideKeys"
      v-model:data="editRowInfo"
      tableName="CREATE_WORK_TIME"
    >
      <template #form-workName>
        <el-input v-model="workName"></el-input>
      </template>
    </TableForm>
    <template #footer>
      <div>
        <el-button @click="closeAddFun">取消</el-button>
        <el-button type="primary" @click="confirmFun">确定</el-button>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import Dialog from '@/components/common/dialog/index.vue';
// import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { addWorkApi, updateWorkApi } from '@/api/project/work';
import { ElMessage } from 'element-plus';
import { useDict } from '@/utils/useDict';
import { disposeMemberList } from '@/views/task/projectDetail/components/project';
import { disposeQueryWorkApi } from '../taskApi';

const props = defineProps<{
  showDialog: boolean;
  taskInfo: any;
  operateType: string;
}>();

const dialogVisible = computed({
  get() {
    return props.showDialog;
  },
  set(val) {
    emits('update:showDialog', val);
  },
});

const hideKeys =
  props.operateType === 'addWork'
    ? ['actualProgress', 'actualWorkHour']
    : ['shouldProgress', 'planWorkHour', 'owner'];

const { TASK_PROGRESS_STATUS } = useDict('TASK_PROGRESS_STATUS');

const tableRef = ref();

const editRowInfo = ref<any>({});

const workName = ref('');

const setWorkName = () => {
  workName.value = editRowInfo.value.workName
    ? editRowInfo.value.workName
    : props.taskInfo.workName;
};
const emits = defineEmits(['update:showDialog']);

const closeFun = () => {
  emits('update:showDialog', false);
};

const closeAddFun = () => {
  addOrEditVisible.value = false;
};

const closeAddOrEditFun = () => {
  addOrEditVisible.value = false;
};

const addOrEditVisible = ref(false);

const actionList = ref([
  {
    title: '编辑',
    type: 'primary',
    hide: (row: any) => props.operateType !== 'addWork' && (!row.beginTime || !row.finishTime),
    click: (row: any) => {
      isEdit.value = true;
      editRowInfo.value = { ...row };
      setWorkName();
      addOrEditVisible.value = true;
    },
  },
  {
    title: '启动',
    type: 'primary',
    hide: (row: any) => props.operateType === 'addWork' || row.beginTime,
    click: (row: any) => {
      updateWorkApiFun({ type: 0, id: row.id });
    },
  },
  {
    title: '关闭',
    type: 'primary',
    hide: (row: any) => props.operateType === 'addWork' || row.finishTime,
    click: (row: any) => {
      updateWorkApiFun({ type: 1, id: row.id });
    },
  },
  {
    title: '删除',
    type: 'error',
    hide: () => props.operateType !== 'addWork',
    click: () => {},
  },
]);

const isEdit = ref(false);

const visibleDialogFun = () => {
  isEdit.value = false;
  editRowInfo.value = {};
  setWorkName();
  addOrEditVisible.value = true;
};

const tableFormRef = ref();

const confirmFun = async () => {
  if (tableFormRef.value.validateFun()) {
    const form = tableFormRef.value.getFormDataFun();
    if (isEdit.value) {
      const params = {
        id: form.id,
        workName: workName.value === props.taskInfo.workName ? '' : workName.value,
        planWorkHour: form.planWorkHour,
        shouldProgress: form.shouldProgress,
        actualProgress: form.actualProgress,
        actualWorkHour: form.actualWorkHour,
        extras: form.extras,
        description: form.description,
        owner: form.owner,
        beginTime: form.beginTime,
        finishTime: form.finishTime,
        type: 2,
      };
      updateWorkApiFun(params);
    } else {
      const res: any = await addWorkApi({ ...form, taskId: props.taskInfo.uuid });
      if (res.code === 200) {
        ElMessage.success('新增报工成功');
        closeAddFun();
        tableRef.value.resetFun();
      } else {
        ElMessage.error(res.message);
      }
    }
  }
};
const updateWorkApiFun = async (params: any) => {
  const res: any = await updateWorkApi(params);
  if (res.code === 200) {
    ElMessage.success(res.message);
    closeAddFun();
    tableRef.value.resetFun();
  } else {
    ElMessage.error(res.message);
  }
};
// const nextPageFun = () => {
//   if (hasSameValue()) return;
//   emits('update:currentProjectBaseInfo', { ...tableFormRef.value.getFormDataFun(), nodeType: NODE_TYPE.PROJECT });
//   emits('nextPageFun', 'basePage');
// };
</script>
<style lang="scss" scoped>
.table-box {
  height: 60vh;
}
</style>