<!-- 委托方满意度调查表列表 --> <script name="QuestionnaireList" lang="ts" setup> import { ElMessage, ElMessageBox, dayjs } from 'element-plus' import type { DateModelType } from 'element-plus' import type { ICustomerQuestionnaireInfo, IListQuery } from './customer-questionnaire' import type { TableColumn } from '@/components/NormalTable/table_interface' import { getQuestionnaireList, remindWorker, send } from '@/api/resource/questionnaire' const { proxy } = getCurrentInstance() as any const router = useRouter() // 查询条件 const searchQuery = ref<IListQuery>({ customerName: '', // 填写单位 writerName: '', writeTimeStart: '', writeTimeEnd: '', sendTimeStart: '', sendTimeEnd: '', offset: 1, limit: 20, }) const dateRangeSend = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 - 发送时间 const dateRangeWrite = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 - 填写时间 const total = ref(0) // 数据条数 const loadingTable = ref(false) // 表格loading const tableRef = ref() // 表头 const columns = ref<TableColumn[]>([ { text: '文件编号', value: 'questionnaireNo', align: 'center', width: '175' }, { text: '填写单位', value: 'customerName', align: 'center' }, { text: '填写人', value: 'writerName', align: 'center' }, { text: '填写时间', value: 'writeTime', align: 'center', width: '180' }, { text: '发送人', value: 'senderName', align: 'center' }, { text: '发送状态', value: 'sendFlagName', align: 'center', width: '90', styleFilter: (row: { sendFlagName: string }) => { return row.sendFlagName == '未发送' ? 'color: red' : 'color: green' } }, { text: '发送时间', value: 'sendTime', align: 'center', width: '180' }, { text: '填写状态', value: 'writeStatus', align: 'center', width: '90', styleFilter: (row: { writeStatus: string }) => { return row.writeStatus == '未提交' ? 'color: red' : 'color: green' } }, ]) const questionnaireList = ref<Array<ICustomerQuestionnaireInfo>>([]) // 表格数据 const checkoutList = ref([]) // 多选 // 多选 const handleSelectionChange = (e: any) => { checkoutList.value = e } // 重置 const reset = () => { searchQuery.value = { customerName: '', // 填写单位 writerName: '', writeTimeStart: '', writeTimeEnd: '', sendTimeStart: '', sendTimeEnd: '', offset: 1, limit: 20, } dateRangeSend.value = ['', ''] dateRangeWrite.value = ['', ''] fetchData(true) } const searchList = () => { fetchData(true) } // 数据查询 async function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 searchQuery.value.offset = 1 } const response = await getQuestionnaireList(searchQuery.value) if (response.code === 200) { questionnaireList.value = response.data.rows total.value = parseInt(response.data.total) } loadingTable.value = false } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 const changePage = (val: { size?: number; page?: number }) => { if (val && val.size) { searchQuery.value.limit = val.size } if (val && val.page) { searchQuery.value.offset = val.page } fetchData(true) } // 添加(单个发送) const addQuestionnarie = () => { router.push({ query: { type: 'create', }, path: 'questionnaire/detail', }) } // 查看详情 const detail = (row: ICustomerQuestionnaireInfo) => { // 将行数据存入缓存 用来在路由之间传递数据 sessionStorage.setItem('questionnaireInfo', JSON.stringify(row)) router.push({ query: { type: 'detail', id: row.id, }, path: 'questionnaire/detail', }) } // 催办 const urging = (row: ICustomerQuestionnaireInfo) => { ElMessageBox.confirm( '确认催办吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { remindWorker({ id: row.id }).then((res) => { ElMessage.success(`满意度调查表 ${row.questionnaireNo} 填写消息已催办`) }) }) } // 点击发送 const handleSend = (row: any) => { ElMessageBox.confirm( '确认发送吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { send({ ids: [row.id] }).then((res) => { ElMessage.success('发送成功') fetchData(true) }) }) } // 批量发送 const batchSend = () => { if (!checkoutList.value.length) { ElMessage.warning('至少选中一条数据') return false } const sendFilter = checkoutList.value.filter((item: { sendFlagName: string }) => item.sendFlagName === '已发送') if (sendFilter.length) { ElMessage.warning('选中的数据中存在【已发送】的数据,请检查') return false } else { const ids = checkoutList.value.map((item: { id: string }) => item.id) send({ ids }).then((res) => { ElMessage.success('发送成功') fetchData(true).then(() => { nextTick(() => { tableRef.value.clearMulti() }) }) }) } } watch(dateRangeSend, (val) => { if (val) { searchQuery.value.sendTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD') searchQuery.value.sendTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD') } else { searchQuery.value.sendTimeStart = '' searchQuery.value.sendTimeEnd = '' } }) watch(dateRangeWrite, (val) => { if (val) { searchQuery.value.writeTimeStart = dayjs(val[0]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[0]).format('YYYY-MM-DD') searchQuery.value.writeTimeEnd = dayjs(val[1]).format('YYYY-MM-DD') === 'Invalid Date' ? '' : dayjs(val[1]).format('YYYY-MM-DD') } else { searchQuery.value.writeTimeStart = '' searchQuery.value.writeTimeEnd = '' } }) onMounted(async () => { searchList() }) </script> <template> <app-container> <!-- 筛选条件 --> <search-area :need-clear="true" @search="searchList" @clear="reset"> <search-item> <el-input v-model="searchQuery.customerName" placeholder="填写单位" clearable /> </search-item> <search-item> <el-input v-model="searchQuery.writerName" placeholder="填写人" clearable /> </search-item> <search-item> <el-date-picker v-model="dateRangeSend" type="daterange" start-placeholder="发送时间(开始)" end-placeholder="发送时间(结束)" /> </search-item> <search-item> <el-date-picker v-model="dateRangeWrite" type="daterange" start-placeholder="填写时间(开始)" end-placeholder="填写时间(结束)" /> </search-item> </search-area> <!-- 表格数据展示 --> <table-container> <!-- 表头区域 --> <template #btns-right> <icon-button v-if="proxy.hasPerm('/resource/customer/questionnaire/add')" icon="icon-add" title="新建" @click="addQuestionnarie" /> <icon-button icon="icon-send" title="批量发送" @click="batchSend" /> </template> <!-- 表格区域 --> <normal-table ref="tableRef" :data="questionnaireList" :total="total" :columns="columns" :query="{ limit: searchQuery.limit, offset: searchQuery.offset }" :list-loading="loadingTable" is-showmulti-select @change="changePage" @multi-select="handleSelectionChange" > <template #preColumns> <el-table-column label="序号" width="55" align="center"> <template #default="scope"> {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }} </template> </el-table-column> </template> <template #columns> <el-table-column fixed="right" label="操作" align="center" width="130"> <template #default="{ row }"> <el-button size="small" type="primary" link @click="detail(row)"> 详情 </el-button> <el-button v-if="row.sendFlagName === '未发送'" size="small" type="primary" link @click="handleSend(row)"> 发送 </el-button> <el-button v-if="row.writeStatus !== '已提交'" size="small" type="primary" link @click="urging(row)"> 催办 </el-button> </template> </el-table-column> </template> </normal-table> </table-container> </app-container> </template>