Browse Source

reactor:回访页面调整;

zhangchong 10 months ago
parent
commit
1feb5ac6b4

+ 1 - 1
src/views/auxiliary/smartCallOut/task.vue

@@ -160,7 +160,7 @@ const onDetail = (row: any) => {
 };
 // 终止任务
 const onEnd = (row: any) => {
-  ElMessageBox.confirm('确定终止任务?', '提示', {
+  ElMessageBox.confirm(`您确定要终止外呼任务【${row.name}】吗?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',

+ 3 - 1
src/views/business/visit/component/Visit-detail.vue

@@ -93,7 +93,9 @@
 							<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
 								<el-form-item label="联系电话">
 									{{ state.orderDetail.contact }}
-									<el-button plain title="呼叫" size="small" type="primary" class="ml8" @click="onCall(state.orderDetail.contact)">外呼</el-button>
+									<el-button plain title="呼叫" size="small" type="primary" class="ml8" @click="onCall(state.orderDetail.contact)" v-if="!disabled"
+										>外呼</el-button
+									>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

+ 73 - 33
src/views/business/visit/index.vue

@@ -2,38 +2,62 @@
 	<div class="business-visit-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-				<el-form-item label="关键字" prop="Keyword">
-					<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="归档类型" prop="FiledType">
-					<el-select v-model="state.queryParams.FiledType" placeholder="请选择归档类型" @change="handleQuery">
-						<el-option label="中心归档" value="10" />
-						<el-option label="部门归档" value="20" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="是否会签" prop="IsCountersign">
-					<el-select v-model="state.queryParams.IsCountersign" placeholder="请选择是否会签" @change="handleQuery">
-						<el-option label="是" value="true" />
-						<el-option label="否" value="false" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="回访状态" prop="VisitState">
-					<el-select v-model="state.queryParams.VisitState" placeholder="请选择回访状态" @change="handleQuery">
-						<el-option v-for="item in state.visitStateOptions" :value="item.value" :key="item.value" :label="item.label" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="回访方式" prop="VisitType">
-					<el-select v-model="state.queryParams.VisitType" placeholder="请选择回访方式" @change="handleQuery">
-						<el-option v-for="item in state.visitTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
-					</el-select>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-						<SvgIcon name="ele-Refresh" class="mr5" />重置
-					</el-button>
-				</el-form-item>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent>
+				<el-row :gutter="20">
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="关键字" prop="Keyword">
+							<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="归档类型" prop="FiledType">
+							<el-select v-model="state.queryParams.FiledType" placeholder="请选择归档类型" @change="handleQuery" class="w100">
+								<el-option label="中心归档" value="10" />
+								<el-option label="部门归档" value="20" />
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="是否会签" prop="IsCountersign">
+							<el-select v-model="state.queryParams.IsCountersign" placeholder="请选择是否会签" @change="handleQuery" class="w100">
+								<el-option label="是" value="true" />
+								<el-option label="否" value="false" />
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="回访状态" prop="VisitState">
+								<el-select v-model="state.queryParams.VisitState" placeholder="请选择回访状态" @change="handleQuery" class="w100">
+									<el-option v-for="item in state.visitStateOptions" :value="item.value" :key="item.value" :label="item.label" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="回访方式" prop="VisitType">
+								<el-select v-model="state.queryParams.VisitType" placeholder="请选择回访方式" @change="handleQuery" class="w100">
+									<el-option v-for="item in state.visitTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="">
+							<div class="flex-end w100">
+								<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
+									{{ searchCol ? '展开' : '收起' }}
+									<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+								</el-button>
+							</div>
+						</el-form-item>
+					</el-col>
+				</el-row>
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
@@ -88,9 +112,14 @@ const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/
 const ruleFormRef = ref<RefType>(); // 表单ref
 const router = useRouter(); // 路由
 const proTableRef = ref<RefType>(); // 表格ref
+const searchCol = ref(true); // 展开/收起
+// 展开/收起
+const closeSearch = () => {
+	searchCol.value = !searchCol.value;
+};
 // 表格配置项
 const columns = ref<any[]>([
-	{ prop: 'order.no', label: '工单编码', width: 150,fixed: 'left' },
+	{ prop: 'order.no', label: '工单编码', width: 150, fixed: 'left' },
 	{ prop: 'order.isProvinceText', label: '省/市工单', width: 100 },
 	{ prop: 'order.title', label: '工单标题', width: 300 },
 	{ prop: 'order.sourceChannel', label: '来源方式', width: 100 },
@@ -220,3 +249,14 @@ onMounted(() => {
 	queryList();
 });
 </script>
+<style scoped lang="scss">
+.business-visit-container {
+	.arrow {
+		transition: transform var(--el-transition-duration);
+		cursor: pointer;
+	}
+	.arrow.is-reverse {
+		transform: rotateZ(-180deg);
+	}
+}
+</style>

+ 25 - 3
src/views/business/visit/smart.vue

@@ -23,12 +23,16 @@
 				v-model:page-size="state.queryParams.PageSize"
 			>
 				<template #tableHeader="scope">
-					<el-button type="primary" @click="onAddVisit" v-auth="'business:visit:smart:add'"> <SvgIcon name="ele-Plus" class="mr5" /> 创建任务 </el-button>
+					<el-button type="primary" @click="onAddVisit" v-auth="'business:visit:smart:add'">
+						<SvgIcon name="ele-Plus" class="mr5" /> 创建任务
+					</el-button>
 				</template>
 				<!-- 表格操作 -->
 				<template #operation="{ row }">
 					<el-button link type="primary" @click="onDetail(row)" title="回访明细"> 回访明细 </el-button>
-					<!--            <el-button link type="primary" @click="onTemplateEdit(row)" title="终止回访任务" v-auth="'smart:visit:end'"> 终止 </el-button>-->
+					<el-button link type="primary" @click="onTermination(row)" title="终止回访任务" v-auth="'business:visit:smart:termination'">
+						终止
+					</el-button>
 				</template>
 			</ProTable>
 		</el-card>
@@ -41,7 +45,7 @@
 
 <script lang="tsx" setup name="businessVisitSmart">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import {  FormInstance } from 'element-plus';
+import { ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { getSmartVisitList } from '@/api/smartVisit';
 
@@ -116,6 +120,24 @@ const smartVisitDetailRef = ref<RefType>();
 const onDetail = (row: any) => {
 	smartVisitDetailRef.value.openDialog(row);
 };
+// 终止智能回访任务
+const onTermination = (row: any) => {
+	console.log(row);
+	ElMessageBox.confirm(`您确定要终止回访任务【${row.name}】吗?`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			state.loading = true;
+		})
+		.catch(() => {
+			// 取消
+		});
+};
 // 页面加载时
 onMounted(() => {
 	queryList();

+ 65 - 29
src/views/business/visit/todo.vue

@@ -2,33 +2,53 @@
 	<div class="business-visit-todo-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-				<el-form-item label="关键字" prop="Keyword">
-					<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="归档类型" prop="FiledType">
-					<el-select v-model="state.queryParams.FiledType" placeholder="请选择归档类型" @change="handleQuery">
-						<el-option label="中心归档" value="10" />
-						<el-option label="部门归档" value="20" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="是否会签" prop="IsCountersign">
-					<el-select v-model="state.queryParams.IsCountersign" placeholder="请选择是否会签" @change="handleQuery">
-						<el-option label="是" value="true" />
-						<el-option label="否" value="false" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="回访方式" prop="VisitType">
-					<el-select v-model="state.queryParams.VisitType" placeholder="请选择回访方式" @change="handleQuery">
-						<el-option v-for="item in state.visitTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
-					</el-select>
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-						<SvgIcon name="ele-Refresh" class="mr5" />重置
-					</el-button>
-				</el-form-item>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent>
+				<el-row :gutter="20">
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="关键字" prop="Keyword">
+							<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="归档类型" prop="FiledType">
+							<el-select v-model="state.queryParams.FiledType" placeholder="请选择归档类型" @change="handleQuery" class="w100">
+								<el-option label="中心归档" value="10" />
+								<el-option label="部门归档" value="20" />
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="是否会签" prop="IsCountersign">
+							<el-select v-model="state.queryParams.IsCountersign" placeholder="请选择是否会签" @change="handleQuery" class="w100">
+								<el-option label="是" value="true" />
+								<el-option label="否" value="false" />
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<transition name="el-zoom-in-top">
+						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+							<el-form-item label="回访方式" prop="VisitType">
+								<el-select v-model="state.queryParams.VisitType" placeholder="请选择回访方式" @change="handleQuery" class="w100">
+									<el-option v-for="item in state.visitTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
+								</el-select>
+							</el-form-item>
+						</el-col>
+					</transition>
+					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+						<el-form-item label="">
+							<div class="flex-end w100">
+								<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
+									{{ searchCol ? '展开' : '收起' }}
+									<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+								</el-button>
+							</div>
+						</el-form-item>
+					</el-col>
+				</el-row>
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
@@ -50,7 +70,7 @@
 				<template #title="{ row }">
 					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
 				</template>
-<!--				<template #isPutThrough="{ row }">
+				<!--				<template #isPutThrough="{ row }">
 					<span v-if="row.isPutThrough">{{ row.isPutThrough ? '未接通' : '已接通' }}</span>
 				</template>-->
 				<!-- 表格操作 -->
@@ -83,9 +103,14 @@ const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/
 const ruleFormRef = ref<RefType>(); // 表单ref
 const router = useRouter(); // 路由
 const proTableRef = ref<RefType>(); // 表格ref
+const searchCol = ref(true); // 展开/收起
+// 展开/收起
+const closeSearch = () => {
+	searchCol.value = !searchCol.value;
+};
 // 表格配置项
 const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 55,align: 'center' },
+	{ type: 'selection', fixed: 'left', width: 55, align: 'center' },
 	{ prop: 'order.no', label: '工单编码', width: 150 },
 	{ prop: 'order.title', label: '工单标题', width: 300 },
 	{ prop: 'order.sourceChannel', label: '来源方式', width: 100 },
@@ -222,3 +247,14 @@ onMounted(() => {
 	queryList();
 });
 </script>
+<style scoped lang="scss">
+.business-visit-todo-container {
+	.arrow {
+		transition: transform var(--el-transition-duration);
+		cursor: pointer;
+	}
+	.arrow.is-reverse {
+		transform: rotateZ(-180deg);
+	}
+}
+</style>