hotline-admin-wex/src/views/quality/done/index.vue

<template>
  <div class="quality-done-container layout-pd">
    <el-card shadow="never">
      <el-tabs v-model="state.queryParams.Source" class="demo-tabs" @tab-change="queryList">
        <el-tab-pane label="受理已质检" :name="1"></el-tab-pane>
        <el-tab-pane label="派单已质检" :name="2"></el-tab-pane>
        <el-tab-pane label="回访已质检" :name="3"></el-tab-pane>
      </el-tabs>
      <el-form :model="state.queryParams" ref="ruleFormRef" :inline="true" @submit.native.prevent>
        <el-form-item label="关键词" prop="Keyword">
          <el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="queryList" />
        </el-form-item>
        <el-form-item label="创建时间" prop="exTime">
          <el-date-picker
              v-model="state.queryParams.exTime"
              type="datetimerange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              @change="timeStartChangeCr"
              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)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <template v-if="state.queryParams.Source === 1">
          <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column prop="name" label="质检方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
          <el-table-column label="受理时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
          <el-table-column label="工单标题" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <span class="color-primary">{{ row.order?.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
            <template #default="{ row }">
              <span>{{ row.order?.acceptorName}} <span v-if="row.order?.acceptorStaffNo">[{{row.order?.acceptorStaffNo}}]</span> </span>
            </template>
          </el-table-column>
          <el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.fromPhone" label="质检人" show-overflow-tooltip></el-table-column>
          <el-table-column label="质检时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.fromPhone" label="质检得分" show-overflow-tooltip></el-table-column>
        </template>
        <template v-if="state.queryParams.Source === 2">
          <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column prop="name" label="质检方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
          <el-table-column label="受理时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
          <el-table-column label="工单标题" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <span class="color-primary">{{ row.order?.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
            <template #default="{ row }">
              <span>{{ row.order?.acceptorName}} <span v-if="row.order?.acceptorStaffNo">[{{row.order?.acceptorStaffNo}}]</span> </span>
            </template>
          </el-table-column>
          <el-table-column prop="creationTime" label="交办时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.fromPhone" label="质检人" show-overflow-tooltip></el-table-column>
          <el-table-column label="质检时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.fromPhone" label="质检得分" show-overflow-tooltip></el-table-column>
        </template>
        <template v-if="state.queryParams.Source === 3">
          <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column prop="name" label="质检方式" show-overflow-tooltip></el-table-column>
          <el-table-column label="工单标题" show-overflow-tooltip width="300">
            <template #default="{ row }">
              <span class="color-primary">{{ row.order?.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="visit.visitStateText" label="回访状态" show-overflow-tooltip></el-table-column>
          <el-table-column prop="visit.visitTypeText" label="回访方式" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="120"></el-table-column>
          <el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
            <template #default="{ row }">
              <span>{{ row.order?.acceptorName}} <span v-if="row.order?.acceptorStaffNo">[{{row.order?.acceptorStaffNo}}]</span> </span>
            </template>
          </el-table-column>
          <el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="170"></el-table-column>
          <el-table-column label="受理时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="办结时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="发布时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回访任务创建时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="visit.employeeName" label="回访人" show-overflow-tooltip width="170"></el-table-column>
          <el-table-column label="回访时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="actualHandleOrgName" label="中心会签" show-overflow-tooltip></el-table-column>
          <el-table-column prop="order.fromPhone" label="质检人" show-overflow-tooltip></el-table-column>
          <el-table-column label="质检时间" show-overflow-tooltip width="170">
            <template #default="{ row }">
              <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order.fromPhone" label="质检得分" show-overflow-tooltip></el-table-column>
        </template>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
            <el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <Empty />
        </template>
      </el-table>
      <!-- 分页 -->
      <pagination
          :total="state.total"
          v-model:page="state.queryParams.PageIndex"
          v-model:limit="state.queryParams.PageSize"
          @pagination="queryList"
      />
    </el-card>
    <!-- 质检 -->
    <quality-inspection ref="qualityInspectionRef" @updateList="queryList"/>
  </div>
</template>

<script lang="ts" setup name="qualityDone">
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';
import {auth} from "/@/utils/authFunction";
import {qualityBaseData,qualityList} from '/@/api/quality'
import {shortcuts} from "/@/utils/constants";

// 引入组件
const QualityInspection = defineAsyncComponent(() => import('/@/views/quality/done/components/Quality-inspection.vue')); // 质检

// 定义变量内容
const state = reactive<any>({
  loading: false, // 加载状态
  queryParams: {
    // 查询参数
    PageIndex: 1,
    PageSize: 10,
    Source: 1,
    CreationTimeStart: '', // 创建时间 开始
    CreationTimeEnd: '', // 创建时间 结束
    exTime: [], // 办理期限
    State: 1, // 待质检
    Keyword:''
  },
  total: 0, // 总条数
  tableData: [], // 表格数据
});
const ruleFormRef = ref<RefType>(null); // 表单ref
const qualitySourceOptions = ref<EmptyArrayType>([]); // 违禁词分类
const qualityStateOptions = ref<EmptyArrayType>([]); // 违禁词属性
const getBaseData = async ()=>{
  try {
    const res = await qualityBaseData();
    qualitySourceOptions.value = res.result?.qualitySource ?? [];
    qualityStateOptions.value = res.result?.qualityState ?? [];
  } catch (error) {
    console.log(error);
  }
}
const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
  if (val) {
    state.queryParams[startKey] = val[0];
    state.queryParams[endKey] = val[1];
  } else {
    state.queryParams[startKey] = '';
    state.queryParams[endKey] = '';
  }
};
// 甄别时间
const timeStartChangeCr = (val: string[]) => {
  handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
};
// 获取参数列表
const queryList = () => {
  state.loading = true;
  if (!auth('quality:query')) ElMessage.error('抱歉，您没有权限获取质检词库列表！');
  else {
    qualityList(state.queryParams)
        .then((res) => {
          state.loading = false;
          state.tableData = res.result.items ?? [];
          state.total = res.result.total ?? 0;
        })
        .finally(() => {
          state.loading = false;
        });
  }
};
// 重置表单
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  state.queryParams.CreationTimeStart = '';
  state.queryParams.CreationTimeEnd = '';
  queryList();
};
// 质检查看
const qualityInspectionRef = ref<RefType>();
const onQualityView = (row:any) => {
  qualityInspectionRef.value.openDialog(row,state.queryParams.Source,true);
};
// 质检编辑
const onQualityEdit = (row: any) => {
  qualityInspectionRef.value.openDialog(row,state.queryParams.Source);
};
// 表格多选
const multipleTableRef = ref<RefType>();
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
// 页面加载时
onMounted(() => {
  getBaseData();
  queryList();
});
</script>

<style lang="scss" scoped>
.quality-done-container {

}
</style>