EmploymentSite/vue/src/views/jobUserManager/jobuser/ServiceTableCom.vue

<!-- 就业人员服务记录弹窗组件 -->
<template>
  <div>
    <a-modal v-model:visible="visible" width="1000px" :title="'服务跟进记录'" @ok="handleOk">
      <template #footer>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
      <a-row class="edit-operation" style="margin-bottom: 10px">
        <a-col :span="24" class="flex-space-between">
          <div>

          </div>
          <div>
            <a-button type="primary" html-type="submit" @click='onAdd'>新增</a-button>
          </div>
        </a-col>
      </a-row>
      <a-table :dataSource="serviceRecordsList" :columns="tableColumns" bordered :scroll="{ x: '100%', y: 500 }"
               :pagination="tablePagination" :loading="searchLoading" @change="handleTableChange">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'serviceTime'">
            <div>
              {{ dayjs(record.serviceTime).format('YYYY-MM-DD') }}
            </div>
          </template>
          <template v-if="column.key === 'operation'">
            <div class="table-operation" v-if="userInfo.userID == record.serviceUserID && record.serviceType == 1">
              <a-button type="link" size="small" @click="onEdit(record)">编辑</a-button>
              <a-button type="link" size="small" @click="onDel(record)">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-modal>

    <!-- 编辑服务记录对话框 -->
    <a-modal
      v-model:visible="editModalVisible"
      :title="(isAdd ? '新增' : '编辑') + '服务跟进记录'"
      :centered="true"
      width="500px"
      :confirmLoading="editLoading"
      @cancel="editModalHandleCancel"
      @ok="editModalHandleOk"
    >
      <a-form
        ref="editFormRef"
        :model="editFormData"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
      >
        <a-form-item
          label="求职人员姓名"
          name="jobUserName"
          :rules="[{ required: true, message: '请填写求职人员姓名!' }]"
        >
          <a-input v-model:value="editFormData.jobUserName" :disabled="true"/>
        </a-form-item>
        <a-form-item
          label="服务内容"
          name="serviceContent"
          :rules="[{ required: true, message: '请填写服务内容!' }]"
        >
          <a-textarea v-model:value="editFormData.serviceContent" :row="4"/>
        </a-form-item>
        <a-form-item
          label="服务时间"
          name="serviceTime"
          :rules="[{ type: 'string' as const, required: true, message: '请选择服务时间!' }]"
        >
          <a-date-picker v-model:value="editFormData.serviceTime" picker="date" value-format="YYYY-MM-DD HH:mm:ss"
                         format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item
          label="服务人员"
          name="serviceUserName"
          :rules="[{ required: true, message: '请选择服务人员!' }]"
        >
          <a-input v-model:value="editFormData.serviceUserName" :disabled="true"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {computed, createVNode, reactive, ref} from "vue";
import {del, getDataById, getList, save} from "@/api/jobUserManager/jobuser/jobUserService";
import {getPaginationTotalTitle} from "@/utils/common";
import {Modal, type TableProps} from "ant-design-vue";
import {useUserStore} from "@/store/modules/user";
import dayjs from "dayjs";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

const userStore = useUserStore();
const userInfo = ref(userStore.getUserInfo);

// 对话框显示关闭开关
const visible = ref(false);
// 求职人员信息
const jobUserData = ref<any>()
// 查询参数
const searchParams = reactive({
  pageIndex: 1,
  pageSize: 20,
  jobUserID: ''
})
// 查询加载
const searchLoading = ref(false);
// 服务跟进记录数据
const serviceRecordsList = ref([]);
// 查询总条数
const serviceRecordsTotal = ref(0);
// 表格结构定义
const tableColumns = [
  {
    title: '序号',
    align: 'center',
    width: 80,
    key: 'jobUserID',
    customRender: (item) =>
      `${searchParams.pageSize * (searchParams.pageIndex - 1) + item.index + 1}`,
    isDisabled: true
  },
  {title: '姓名', dataIndex: 'jobUserName', key: 'jobUserName', width: 150, align: "center"},
  {title: '服务内容', dataIndex: 'serviceContent', key: 'serviceContent', width: 200, align: "center"},
  {title: '服务时间', dataIndex: 'serviceTime', key: 'serviceTime', width: 150, align: "center"},
  {title: '服务人员', dataIndex: 'serviceUserName', key: 'serviceUserName', width: 150, align: "center"},
  {title: '操作', key: 'operation', width: 100, align: 'center', isDisabled: true},
];
// 表格分页数据
const tablePagination = computed(() => ({
  total: serviceRecordsTotal.value,
  current: searchParams.pageIndex,
  pageSize: searchParams.pageSize,
  showSizeChanger: true,
  showTotal: (total) => getPaginationTotalTitle(total),
}));
// 新增对话框显示关闭开关
const editModalVisible = ref(false);
// 新增加载动画
const editLoading = ref(false);
// 编辑数据
const editFormData = ref({
  serviceID: "",
  jobUserID: "",
  jobUserName: "",
  serviceContent: "",
  serviceTime: "",
  serviceUserName: "",
  serviceUserID: "",
});
// 是否新增
const isAdd = ref(true);
// 编辑表单ref
const editFormRef = ref();

// 数据加载
async function loadData() {
  searchLoading.value = true;
  searchParams.jobUserID = jobUserData.value.jobUserID;
  await getList(searchParams).then((result: any) => {
    serviceRecordsList.value = result.list;
    serviceRecordsTotal.value = result.total;
  }).finally(() => {
    searchLoading.value = false;
  });
}

// 对话框开启事件
function show(jobUser: any) {
  jobUserData.value = jobUser;
  loadData();
  visible.value = true;
}

// 对话框确定事件
function handleOk() {
  visible.value = false;
}

// 表格分页触发事件
const handleTableChange: TableProps['onChange'] = (pag: {
  pageSize: number;
  current: number;
}) => {
  searchParams.pageIndex = pag.current;
  searchParams.pageSize = pag.pageSize;
  loadData();
};

// 新增按钮点击事件
function onAdd() {
  getDataById("").then((result: any) => {
    // 初始化部分数据
    editFormData.value.serviceID = result.serviceID;
    editFormData.value.jobUserName = jobUserData.value.name;
    editFormData.value.jobUserID = jobUserData.value.jobUserID;
    editFormData.value.serviceUserName = <string>userInfo.value.name;
    editFormData.value.serviceUserID = <string>userInfo.value.userID;
    editFormData.value.serviceTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }).finally(() => {
    editModalVisible.value = true;
    isAdd.value = true;
  })

}

// 编辑按钮点击事件
function onEdit(record: any) {
  getDataById(record.serviceID).then((result: any) => {
    editFormData.value = result;
  })
  editModalVisible.value = true;
  isAdd.value = false;
}

// 删除事件
function onDel(record: any) {
  Modal.confirm({
    title: '确认删除该服务记录吗？',
    icon: createVNode(ExclamationCircleOutlined),
    content: '',
    okText: '确认删除',
    okType: 'danger',
    okButtonProps: {},
    cancelText: '取消',
    onOk() {
      del([record.serviceID]).then(() => {
        loadData();
      });
    },
  })
}

// 编辑对话框确定事件
async function editModalHandleOk() {
  editFormRef.value
    .validate()
    .then(async () => {
      editLoading.value = true;
      await save(editFormData.value).then(() => {
        editModalHandleCancel();
        loadData();
      }).finally(() => {
        editLoading.value = false;
      });
    })
    .catch(error => {
      console.log('error', error);
    });
}

// 编辑对话框取消事件
function editModalHandleCancel() {
  editFormData.value.serviceID = "";
  editFormData.value.serviceContent = '';
  editFormData.value.serviceTime = '';
  editModalVisible.value = false;
}

defineExpose({
  show
})
</script>

<style scoped>

</style>