123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- <template>
- <div class="statistics-order-visit-discontent-container layout-pd">
- <!-- 搜索 -->
- <el-card shadow="never">
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
- <el-form-item label="部门名称" prop="OrgName">
- <el-input v-model="state.queryParams.OrgName" placeholder="部门名称" clearable @keyup.enter="queryList" class="keyword-input" />
- </el-form-item>
- <el-form-item label="时间段" prop="crTime">
- <el-date-picker
- v-model="state.queryParams.crTime"
- type="datetimerange"
- unlink-panels
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- :shortcuts="shortcuts"
- @change="queryList"
- value-format="YYYY-MM-DD[T]HH:mm:ss"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
- <SvgIcon name="ele-Refresh" class="mr5" />重置
- </el-button>
- </el-form-item>
- </el-form>
- </el-card>
- <el-card shadow="never">
- <!-- 表格 -->
- <el-table :data="tableData" show-summary border row-key="OrgCode" ref="multipleTableRef" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" align="center" />
- <el-table-column prop="OrgName" label="部门名称" align="center" />
- <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.dicDataValue" :label="item.dicDataName" align="center">
- <template #default="{ row, column }">
- <el-button type="primary" @click="handleDetail(row, row[column.property])" link>{{ row[column.property] }}</el-button>
- </template>
- </el-table-column>
- <template #empty>
- <Empty />
- </template>
- </el-table>
- </el-card>
- </div>
- </template>
- <script setup lang="ts" name="statisticsVisitDiscontent">
- import { onMounted, reactive, ref } from 'vue';
- import { ElButton, ElMessage, FormInstance } from 'element-plus';
- import { throttle } from '@/utils/tools';
- import { departmentUnsatisfied } from '@/api/statistics/order';
- import { shortcuts } from '@/utils/constants';
- import dayjs from 'dayjs';
- import { useRouter } from 'vue-router';
- // 定义变量内容
- const columns = ref([]);
- const tableData = ref([]);
- const ruleFormRef = ref<RefType>(); // 表单ref
- const state = reactive(<any>{
- queryParams: {
- // 查询条件
- PageIndex: 1,
- PageSize: 10,
- OrgName: null, // 关键词
- crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], // 时间默认今天开始到今天结束
- },
- loading: false, // 加载
- total: 0, // 总数
- });
- /** 获取列表 */
- const queryList = throttle(() => {
- state.loading = true;
- let StartTime = null;
- let EndTime = null;
- if (state.queryParams?.crTime) {
- StartTime = state.queryParams?.crTime[0];
- EndTime = state.queryParams?.crTime[1];
- }
- const request = {
- StartTime,
- EndTime,
- OrgName: state.queryParams.OrgName,
- Keyword: state.queryParams.Keyword,
- SortField: state.queryParams.SortField,
- SortRule: state.queryParams.SortRule,
- };
- departmentUnsatisfied(request)
- .then((res: any) => {
- columns.value = res.result?.dicReason ?? [];
- tableData.value = res.result?.data ?? [];
- // 判断部门名称是否重复 重复的合并数据 并去除重复数据
- const arr = [];
- tableData.value.forEach((item: any) => {
- const index = arr.findIndex((v: any) => v.OrgName === item.OrgName);
- if (index === -1) {
- arr.push(item);
- } else {
- arr[index] = Object.assign(arr[index], item);
- }
- });
- tableData.value = arr;
- state.loading = false;
- })
- .catch(() => {
- state.loading = false;
- });
- }, 300);
- /** 重置按钮操作 */
- const resetQuery = throttle((formEl: FormInstance | undefined) => {
- if (!formEl) return;
- formEl.resetFields();
- queryList();
- }, 300);
- // 表格多选
- const multipleTableRef = ref<RefType>();
- const multipleSelection = ref<any>([]);
- const handleSelectionChange = (val: any[]) => {
- multipleSelection.value = val;
- };
- // 查看详情
- const router = useRouter();
- const handleDetail = (row: any, column) => {
- if (!column) return ElMessage.warning('暂无数据');
- // 获取键名
- const columnKey = Object.keys(row).find((item) => row[item] === column);
- const columnName = columns.value.find((item) => item.dicDataValue === columnKey)?.dicDataName;
- let startTime = null;
- let endTime = null;
- if (state.queryParams?.crTime) {
- startTime = state.queryParams?.crTime[0];
- endTime = state.queryParams?.crTime[1];
- }
- router.push({
- name: 'statisticsOrderVisitTable',
- params: {
- id: columnKey,
- startTime: startTime ?? 'null',
- endTime: endTime ?? 'null',
- orgId: row?.OrgCode,
- tagsViewName: `满意度统计明细(${row.OrgName}-${columnName})`,
- },
- });
- };
- onMounted(() => {
- queryList();
- });
- </script>
|