parent
0af551fe52
commit
b43a99e711
@ -0,0 +1,192 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-dialog |
||||
class="com-dialog" |
||||
v-model="modifyServiceFlag" |
||||
title="业务参数列表" |
||||
width="1000" |
||||
> |
||||
<div style="margin-bottom: 10px"> |
||||
<el-button type="primary" :icon="Plus" @click="addRow">新增</el-button> |
||||
</div> |
||||
<div class="any-table"> |
||||
<el-form :model="tableData" ref="ruleFormRef" v-loading="loading"> |
||||
<el-table :data="tableData" max-height="350"> |
||||
<el-table-column |
||||
label="业务参数名称" |
||||
prop="argsName" |
||||
align="center" |
||||
> |
||||
<template #default="scope"> |
||||
<el-form-item |
||||
:prop="scope.row.argsName" |
||||
style="margin-bottom: 0" |
||||
> |
||||
<el-input v-model="scope.row.argsName" /> |
||||
</el-form-item> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="业务参数新值" |
||||
prop="argsValueNew" |
||||
align="center" |
||||
> |
||||
<template #default="scope"> |
||||
<el-form-item |
||||
:prop="scope.row.argsValueNew" |
||||
style="margin-bottom: 0" |
||||
> |
||||
<el-input v-model="scope.row.argsValueNew" /> |
||||
</el-form-item> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="业务参数旧值" |
||||
prop="argsValueOld" |
||||
align="center" |
||||
> |
||||
<template #default="scope"> |
||||
<el-form-item |
||||
:prop="scope.row.argsValueOld" |
||||
style="margin-bottom: 0" |
||||
> |
||||
<el-input v-model="scope.row.argsValueOld" /> |
||||
</el-form-item> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="100"> |
||||
<template #default="scope"> |
||||
<el-form-item style="margin-bottom: 0"> |
||||
<el-button |
||||
type="danger" |
||||
:icon="Delete" |
||||
link |
||||
@click="deleteRow(scope.$index)" |
||||
>删除 |
||||
</el-button> |
||||
</el-form-item> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-form> |
||||
</div> |
||||
<template #footer> |
||||
<el-button type="primary" @click="submitForm">确定 </el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { OrderServiceVO } from "@/api/order/types"; |
||||
import { |
||||
mergeOrderServiceVOPage, |
||||
updateMergeOrderServiceParameter, |
||||
} from "@/api/order"; |
||||
import { Delete, Plus } from "@element-plus/icons-vue"; |
||||
import { FormInstance } from "element-plus"; |
||||
|
||||
const ruleFormRef = ref<FormInstance>(); |
||||
const modifyServiceFlag = ref<boolean>(false); |
||||
const loading = ref<boolean>(false); |
||||
const tableData = ref<OrderServiceVO[]>([]); |
||||
const total = ref<number>(0); |
||||
const orderId = ref<number>(0); |
||||
const service = ref<string>(""); |
||||
const serviceFlag = ref<string>(""); |
||||
const queryPage = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 50, |
||||
}); |
||||
|
||||
const openModify = ( |
||||
orderId_?: number, |
||||
service_?: string, |
||||
serviceFlag_?: string |
||||
) => { |
||||
if (orderId_ != undefined) { |
||||
orderId.value = orderId_; |
||||
} |
||||
if (service_ != undefined) { |
||||
service.value = service_; |
||||
} |
||||
if (serviceFlag_ != undefined) { |
||||
serviceFlag.value = serviceFlag_; |
||||
} |
||||
modifyServiceFlag.value = true; |
||||
getOrderServicePage(); |
||||
}; |
||||
defineExpose({ openModify }); |
||||
const getOrderServicePage = () => { |
||||
loading.value = true; |
||||
mergeOrderServiceVOPage(orderId.value, service.value, queryPage.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const addRow = () => { |
||||
tableData.value.push({ orderId: orderId.value, service: service.value }); |
||||
}; |
||||
const deleteRow = (index: number) => { |
||||
if (tableData.value.length === 1) { |
||||
ElMessage({ |
||||
message: "不能删除所有数据", |
||||
duration: 1000, |
||||
type: "error", |
||||
}); |
||||
return; |
||||
} |
||||
tableData.value.splice(index, 1); |
||||
}; |
||||
const emit = defineEmits(["success"]); |
||||
const submitForm = () => { |
||||
let flag = true; |
||||
for (let i = 0; i < tableData.value.length; i++) { |
||||
let obj = tableData.value[i]; |
||||
if (obj.argsName === undefined) { |
||||
ElMessage({ |
||||
message: "请填写参数名称", |
||||
duration: 1500, |
||||
type: "error", |
||||
}); |
||||
flag = false; |
||||
break; |
||||
} else if (obj.argsValueNew === undefined) { |
||||
ElMessage({ |
||||
message: "请填写参数值(新)", |
||||
duration: 1500, |
||||
type: "error", |
||||
}); |
||||
flag = false; |
||||
break; |
||||
} |
||||
} |
||||
if (flag) { |
||||
loading.value = true; |
||||
updateMergeOrderServiceParameter( |
||||
orderId.value, |
||||
service.value, |
||||
serviceFlag.value, |
||||
tableData.value |
||||
) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
emit("success"); |
||||
modifyServiceFlag.value = false; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
@ -0,0 +1,495 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<div |
||||
class="search-container" |
||||
style="padding: 10px; display: flex; justify-content: flex-end" |
||||
> |
||||
<el-popconfirm |
||||
title="确定修改工单状态吗?" |
||||
:icon="InfoFilled" |
||||
icon-color="#626AEF" |
||||
width="200" |
||||
@confirm="save" |
||||
> |
||||
<template #reference> |
||||
<el-button type="primary" v-hasPerm="['order:detail:update:status']" |
||||
>保存</el-button |
||||
> |
||||
</template> |
||||
</el-popconfirm> |
||||
<el-popconfirm |
||||
title="确定手动执行工单吗?" |
||||
:icon="InfoFilled" |
||||
icon-color="#626AEF" |
||||
width="200" |
||||
@confirm="execute" |
||||
> |
||||
<template #reference> |
||||
<el-button type="primary" v-hasPerm="['family:operate:order:execute']" |
||||
>执行</el-button |
||||
> |
||||
</template> |
||||
</el-popconfirm> |
||||
|
||||
<el-button |
||||
type="primary" |
||||
@click="skipModifyOrder" |
||||
v-hasPerm="['order:detail:update']" |
||||
>修改</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
@click="skipOperate" |
||||
v-hasPerm="['order:detail:operate:maintain']" |
||||
>设备操作维护</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
@click="openOrderLog" |
||||
v-hasPerm="['order:detail:log']" |
||||
>工单日志</el-button |
||||
> |
||||
</div> |
||||
<el-card shadow="never" v-loading="loading"> |
||||
<el-scrollbar height="500"> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>工单信息</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="工单序号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.receivedOrderId }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="工单受理号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.receivedOrderLhs }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="操作类型" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderRemark }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="工单业务类型" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderServiceType }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="开工单日期" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderDate }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="工单接收日期" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.receivedDate }} |
||||
</el-descriptions-item> |
||||
<!-- <el-descriptions-item--> |
||||
<!-- label="工单要求完工日期"--> |
||||
<!-- label-align="center"--> |
||||
<!-- align="center"--> |
||||
<!-- label-class-name="my-label"--> |
||||
<!-- class-name="my-content"--> |
||||
<!-- width="150px"--> |
||||
<!-- >--> |
||||
<!-- {{ orderInfo.orderDealDate }}--> |
||||
<!-- </el-descriptions-item>--> |
||||
<el-descriptions-item |
||||
label="工单处理日期" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderDealDate }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="AD编号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.adNo }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="手工绑定设备标识" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div |
||||
v-if=" |
||||
orderInfo.orderStatus === '1' || |
||||
orderInfo.orderStatus === '3' || |
||||
orderInfo.orderStatus === '5' |
||||
" |
||||
> |
||||
<el-tag>未绑定设备</el-tag> |
||||
</div> |
||||
<div v-else> |
||||
<el-button type="primary" link @click="openBindingDev">{{ |
||||
orderInfo.devSnoOui === null |
||||
? "未绑定设备" |
||||
: orderInfo.devSnoOui |
||||
}}</el-button> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="工单状态" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<dictionary type-code="order_status" v-model="orderStatus" /> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="PPPoE帐号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.pppoeAccount }} |
||||
</el-descriptions-item> |
||||
<!-- <el-descriptions-item--> |
||||
<!-- label="BANDAccess"--> |
||||
<!-- label-align="center"--> |
||||
<!-- align="center"--> |
||||
<!-- label-class-name="my-label"--> |
||||
<!-- class-name="my-content"--> |
||||
<!-- width="150px"--> |
||||
<!-- >--> |
||||
<!-- {{ orderInfo.bandAccess }}--> |
||||
<!-- </el-descriptions-item>--> |
||||
<!-- <el-descriptions-item--> |
||||
<!-- label="IPTVAccess"--> |
||||
<!-- label-align="center"--> |
||||
<!-- align="center"--> |
||||
<!-- label-class-name="my-label"--> |
||||
<!-- class-name="my-content"--> |
||||
<!-- width="150px"--> |
||||
<!-- >--> |
||||
<!-- {{ orderInfo.iptvAccess }}--> |
||||
<!-- </el-descriptions-item>--> |
||||
<el-descriptions-item |
||||
label="逻辑ID" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.userSnNo }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="备注" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.remark }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备在线状态" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.devOnlineStatus }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="逻辑KEY" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.userSnKey }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="接入方式" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.devAccessType }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions :column="3" border style="margin-top: 10px"> |
||||
<template #title> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>客户信息</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="系统管理域" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.domain }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="政企管理域" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
/> |
||||
<el-descriptions-item |
||||
label="客户类型" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderCustomerKind }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="回单标志" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderDoneFlag }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="回单日期" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.orderDoneDate }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="虚拟标志" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ orderInfo.dummyFlag }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<div class="mt-2"> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>工单业务信息列表</span |
||||
> |
||||
</div> |
||||
</div> |
||||
<div class="any-table"> |
||||
<el-table :data="orderServiceList"> |
||||
<el-table-column label="业务名称" prop="service" align="center"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
@click="openServiceList(scope.row.service)" |
||||
link |
||||
>{{ scope.row.service }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="业务变更信息" |
||||
prop="serviceFlag" |
||||
align="center" |
||||
/> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryPage.pageNum" |
||||
v-model:limit="queryPage.pageSize" |
||||
@pagination="getOrderInfoServiceList" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
</el-card> |
||||
<merge-order-service-parameter-table ref="serviceParameterRef" /> |
||||
<order-log ref="orderLogRef" /> |
||||
<binding-device @success="getData" ref="bindingDevRef" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { OrderInfoServiceVO, OrderInfoVO } from "@/api/order/types"; |
||||
import { |
||||
checkDeviceExits, executeMergeOrder, |
||||
executeOrder, |
||||
findMergeOrderInfoById, |
||||
findMergeOrderInfoServicePage, mergeUpdateOrderStatus, |
||||
updateOrderStatus |
||||
} from "@/api/order"; |
||||
import { Grid, InfoFilled } from "@element-plus/icons-vue"; |
||||
import OrderLog from "@/views/family/operate/order/components/OrderLog.vue"; |
||||
import BindingDevice from "@/views/family/operate/order/components/BindingDevice.vue"; |
||||
import MergeOrderServiceParameterTable from "@/views/family/operate/merge-order-manager/components/MergeOrderServiceParameterTable.vue"; |
||||
|
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
let orderId: number = parseInt(<string>route.params.orderId); |
||||
const orderInfo = ref<OrderInfoVO>({}); |
||||
const loading = ref<boolean>(false); |
||||
const orderStatus = ref<string>(); |
||||
const queryPage = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const total = ref<number>(0); |
||||
const orderServiceList = ref<OrderInfoServiceVO[]>([]); |
||||
const serviceParameterRef = ref(); |
||||
const orderLogRef = ref(); |
||||
const bindingDevRef = ref(); |
||||
const getData = () => { |
||||
loading.value = true; |
||||
findMergeOrderInfoById(orderId) |
||||
.then(({ data }) => { |
||||
orderInfo.value = data; |
||||
orderStatus.value = data.orderStatus; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const getOrderInfoServiceList = () => { |
||||
findMergeOrderInfoServicePage(orderId, queryPage.value).then(({ data }) => { |
||||
orderServiceList.value = data.list; |
||||
total.value = data.total; |
||||
}); |
||||
}; |
||||
const save = () => { |
||||
loading.value = true; |
||||
mergeUpdateOrderStatus(orderId, <string>orderStatus.value) |
||||
.then() |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const execute = () => { |
||||
loading.value = true; |
||||
executeMergeOrder(orderId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "执行成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const skipModifyOrder = () => { |
||||
router.push({ path: `/resources/modify-merge-order/${orderId}` }); |
||||
}; |
||||
const openServiceList = (service: string) => { |
||||
serviceParameterRef.value.openParameter(orderId, service); |
||||
}; |
||||
const openOrderLog = () => { |
||||
orderLogRef.value.open(orderId); |
||||
}; |
||||
const openBindingDev = () => { |
||||
bindingDevRef.value.open(orderId); |
||||
}; |
||||
const skipOperate = () => { |
||||
let adNo = orderInfo.value.adNo; |
||||
if (adNo == null || adNo.length == 0) { |
||||
ElMessage({ |
||||
message: "设备不存在", |
||||
duration: 2000, |
||||
type: "error", |
||||
}); |
||||
return; |
||||
} |
||||
checkDeviceExits(adNo).then(({ data }) => { |
||||
router.push({ |
||||
path: `/resources/remote-info/${data.devId}/${data.typeAndVerId}`, |
||||
}); |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
getData(); |
||||
getOrderInfoServiceList(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
width: 70px !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
:deep(.el-scrollbar__thumb) { |
||||
display: none; |
||||
} |
||||
:deep(.el-card__body) { |
||||
padding: 10px 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,73 @@ |
||||
<template> |
||||
<el-dialog |
||||
class="com-dialog" |
||||
v-model="parameterFlag" |
||||
title="业务参数列表" |
||||
align-center |
||||
width="900" |
||||
> |
||||
<div class="any-table"> |
||||
<el-table :data="tableData" v-loading="loading" max-height="550"> |
||||
<el-table-column label="业务参数名称" prop="argsName" align="center" /> |
||||
<el-table-column |
||||
label="业务参数新值" |
||||
prop="argsValueNew" |
||||
align="center" |
||||
/> |
||||
<el-table-column |
||||
label="业务参数旧值" |
||||
prop="argsValueOld" |
||||
align="center" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryPage.pageNum" |
||||
v-model:limit="queryPage.pageSize" |
||||
@pagination="getOrderServicePage" |
||||
/> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { OrderServiceVO } from "@/api/order/types"; |
||||
import { mergeOrderServiceVOPage, orderServiceVOPage } from "@/api/order"; |
||||
|
||||
const parameterFlag = ref<boolean>(false); |
||||
const loading = ref<boolean>(false); |
||||
const tableData = ref<OrderServiceVO[]>([]); |
||||
const total = ref<number>(0); |
||||
const orderId = ref<number>(0); |
||||
const service = ref<string>(""); |
||||
const queryPage = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const openParameter = (orderId_: number, service_: string) => { |
||||
orderId.value = orderId_; |
||||
service.value = service_; |
||||
parameterFlag.value = true; |
||||
getOrderServicePage(); |
||||
}; |
||||
defineExpose({ openParameter }); |
||||
|
||||
const getOrderServicePage = () => { |
||||
loading.value = true; |
||||
mergeOrderServiceVOPage(orderId.value, service.value, queryPage.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-dialog__body){ |
||||
padding: 0 !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,238 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never" v-loading="loading"> |
||||
<el-form :model="formData" ref="ruleFormRef" :rules="rules"> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>工单信息修改</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<template #extra> |
||||
<el-popconfirm |
||||
title="确定修改工单吗?" |
||||
:icon="InfoFilled" |
||||
icon-color="#626AEF" |
||||
width="200" |
||||
@confirm="submitForm(ruleFormRef)" |
||||
> |
||||
<template #reference> |
||||
<el-button type="primary" v-hasPerm="['order:detail:update']" |
||||
>保存</el-button |
||||
> |
||||
</template> |
||||
</el-popconfirm> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="工单序号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="receivedOrderId" style="margin-bottom: 0"> |
||||
<el-input |
||||
v-model="formData.receivedOrderId" |
||||
placeholder="请输入工单序号" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="开工单日期" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="orderDate" style="margin-bottom: 0"> |
||||
<el-input v-model="formData.orderDate" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="工单业务类型" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="orderServiceType" style="margin-bottom: 0"> |
||||
<dictionary |
||||
v-model="formData.orderServiceType" |
||||
type-code="order_service_type" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="AD编号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="adNo" style="margin-bottom: 0"> |
||||
<el-input v-model="formData.adNo" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="Pppoe账号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="pppoeAccount" style="margin-bottom: 0"> |
||||
<el-input v-model="formData.pppoeAccount" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="客户类型" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="orderCustomerKind" style="margin-bottom: 0"> |
||||
<dictionary |
||||
v-model="formData.orderCustomerKind" |
||||
type-code="custom_type" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
<div class="mt-1"> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>工单业务信息列表</span |
||||
> |
||||
</div> |
||||
</div> |
||||
<div class="any-table"> |
||||
<el-table :data="orderServiceList"> |
||||
<el-table-column label="业务名称" prop="service" align="center"> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
@click="openServiceParameter(scope.row)" |
||||
link |
||||
>{{ scope.row.service }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="业务变更信息" |
||||
prop="serviceFlag" |
||||
align="center" |
||||
/> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryPage.pageNum" |
||||
v-model:limit="queryPage.pageSize" |
||||
@pagination="getOrderInfoServiceList" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
<MergeModifyServiceParameter |
||||
ref="modifyServiceRef" |
||||
@success="getOrderInfoServiceList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ModifyOrderForm, OrderInfoServiceVO } from "@/api/order/types"; |
||||
import { |
||||
findMergeOrderInfoServicePage, |
||||
findOrderInfoServicePage, getMergeModifyForm, |
||||
getModifyForm, |
||||
ModifyForm, ModifyMergeOrderForm |
||||
} from "@/api/order"; |
||||
import { Grid, InfoFilled } from "@element-plus/icons-vue"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
import ModifyServiceParameter from "@/views/family/operate/order/components/ModifyServiceParameter.vue"; |
||||
import MergeModifyServiceParameter |
||||
from "@/views/family/operate/merge-order-manager/components/MergeModifyServiceParameter.vue"; |
||||
const loading = ref<boolean>(false); |
||||
const route = useRoute(); |
||||
const ruleFormRef = ref<FormInstance>(); |
||||
const modifyServiceRef = ref(); |
||||
const formData = ref<ModifyOrderForm>({}); |
||||
let orderId: number = parseInt(<string>route.params.orderId); |
||||
const queryPage = ref<PageQuery>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const total = ref<number>(0); |
||||
const orderServiceList = ref<OrderInfoServiceVO[]>([]); |
||||
|
||||
const rules = reactive<FormRules<ModifyOrderForm>>({ |
||||
receivedOrderId: [ |
||||
{ required: true, message: "请填写工单序号", trigger: "blur" }, |
||||
], |
||||
}); |
||||
const loadModifyForm = () => { |
||||
loading.value = true; |
||||
getMergeModifyForm(orderId) |
||||
.then(({ data }) => { |
||||
formData.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const getOrderInfoServiceList = () => { |
||||
findMergeOrderInfoServicePage(orderId, queryPage.value).then(({ data }) => { |
||||
orderServiceList.value = data.list; |
||||
total.value = data.total; |
||||
}); |
||||
}; |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
ModifyMergeOrderForm(formData.value) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} |
||||
}); |
||||
}; |
||||
const openServiceParameter = (row: OrderInfoServiceVO) => { |
||||
modifyServiceRef.value.openModify(row.orderId, row.service, row.serviceFlag); |
||||
}; |
||||
onMounted(() => { |
||||
loadModifyForm(); |
||||
getOrderInfoServiceList(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
:deep(.el-card__body) { |
||||
padding: 10px 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,286 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="search-container"> |
||||
<el-form :model="queryForm" :inline="true"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="查询条件"> |
||||
<el-select |
||||
v-model="queryForm.selectName" |
||||
placeholder="请选择" |
||||
style="width: 240px" |
||||
@change="resetSelect" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6" v-if="queryForm.selectName !== undefined"> |
||||
<el-input |
||||
v-model="queryForm.selectValue" |
||||
placeholder="请输入" |
||||
style="width: 300px" |
||||
/> |
||||
</el-col> |
||||
<el-col :span="buttonColSpan"> |
||||
<el-form-item> |
||||
<el-button type="primary" :icon="Search" @click="handleQuery" |
||||
>搜索 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; justify-content: flex-end"> |
||||
<el-button |
||||
type="primary" |
||||
style="margin-right: 10px" |
||||
v-hasPerm="['order:index:merge']" |
||||
@click="openMergerOrder" |
||||
>合并工单 |
||||
</el-button> |
||||
<table-bar :columns="columns" @change-columns="changeColumns" /> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table v-loading="loading" :data="tableData" max-height="380"> |
||||
<el-table-column |
||||
label="工单序号" |
||||
align="center" |
||||
fixed |
||||
width="250" |
||||
prop="receivedOrderId" |
||||
v-if="columns[0].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
@click="skipOrderEdit(scope.row.orderId)" |
||||
link |
||||
>{{ scope.row.receivedOrderId }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="受理号" |
||||
align="center" |
||||
width="250" |
||||
show-overflow-tooltip |
||||
prop="receivedOrderLhs" |
||||
v-if="columns[1].show" |
||||
/> |
||||
<el-table-column |
||||
label="开工单日期" |
||||
align="center" |
||||
prop="orderDate" |
||||
width="180" |
||||
v-if="columns[2].show" |
||||
/> |
||||
<el-table-column |
||||
label="AD编号" |
||||
align="center" |
||||
prop="adNo" |
||||
width="180" |
||||
v-if="columns[3].show" |
||||
/> |
||||
<el-table-column |
||||
label="工单状态" |
||||
align="center" |
||||
prop="orderStatus" |
||||
v-if="columns[4].show" |
||||
/> |
||||
<el-table-column |
||||
label="操作类型" |
||||
align="center" |
||||
prop="orderRemark" |
||||
v-if="columns[5].show" |
||||
/> |
||||
<el-table-column |
||||
label="工单业务类型" |
||||
align="center" |
||||
width="180" |
||||
prop="orderServiceType" |
||||
v-if="columns[6].show" |
||||
/> |
||||
<el-table-column |
||||
label="业务类型" |
||||
align="center" |
||||
width="180" |
||||
prop="operRemark" |
||||
v-if="columns[7].show" |
||||
/> |
||||
<el-table-column |
||||
label="端口" |
||||
align="center" |
||||
prop="port" |
||||
v-if="columns[8].show" |
||||
/> |
||||
<el-table-column |
||||
label="PPPoe账号" |
||||
align="center" |
||||
prop="pppoeAccount" |
||||
width="180" |
||||
v-if="columns[9].show" |
||||
/> |
||||
<el-table-column |
||||
label="电话号码" |
||||
align="center" |
||||
width="180" |
||||
prop="telNum" |
||||
v-if="columns[10].show" |
||||
/> |
||||
<el-table-column |
||||
label="系统管理域" |
||||
align="center" |
||||
prop="domain" |
||||
width="180" |
||||
v-if="columns[11].show" |
||||
/> |
||||
<el-table-column |
||||
label="是否定制终端" |
||||
align="center" |
||||
prop="remark3" |
||||
width="180" |
||||
v-if="columns[12].show" |
||||
> |
||||
<template #default="scope"> |
||||
<span v-if="scope.row.remark3 === '1'">非定制终端</span> |
||||
<span v-else>定制终端</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="工单接收日期" |
||||
align="center" |
||||
prop="receivedDate" |
||||
width="180" |
||||
v-if="columns[13].show" |
||||
/> |
||||
<el-table-column |
||||
label="工单处理日期" |
||||
align="center" |
||||
prop="orderDealDate" |
||||
width="180" |
||||
v-if="columns[14].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备上线状态" |
||||
align="center" |
||||
width="180" |
||||
prop="devOnLineStatus" |
||||
v-if="columns[15].show" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryForm.pageNum" |
||||
v-model:limit="queryForm.pageSize" |
||||
@pagination="handleQuery" |
||||
/> |
||||
</el-card> |
||||
<merge-order ref="mergeOrderRef" @success="reloadGetData" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Search } from "@element-plus/icons-vue"; |
||||
import { oderMergeTablePage, oderTablePage } from "@/api/order"; |
||||
import { OrderTableVO } from "@/api/order/types"; |
||||
import MergeOrder from "@/views/family/operate/order/components/MergeOrder.vue"; |
||||
|
||||
defineOptions({ |
||||
name: "MergeOrderManager", |
||||
inheritAttrs: false, |
||||
}); |
||||
const mergeOrderRef = ref(); |
||||
const queryForm = ref<SelectForm>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const router = useRouter(); |
||||
const total = ref<number>(0); |
||||
const tableData = ref<OrderTableVO[]>([]); |
||||
const options = ref<OptionType[]>([ |
||||
{ label: "逻辑Id", value: "logicId" }, |
||||
{ label: "工单序号", value: "receiveOrderId" }, |
||||
{ label: "AD编号", value: "adNo" }, |
||||
{ label: "pppoe账号", value: "pppoe" }, |
||||
]); |
||||
const loading = ref<boolean>(false); |
||||
const buttonColSpan = computed(() => { |
||||
return queryForm.value.selectName === undefined ? 18 : 12; |
||||
}); |
||||
const columns = ref<TableColumns[]>([ |
||||
{ name: "工单序号", show: true }, |
||||
{ name: "受理号", show: true }, |
||||
{ name: "开工单日期", show: false }, |
||||
{ name: "AD编号", show: true }, |
||||
{ name: "工单状态", show: true }, |
||||
{ name: "操作类型", show: false }, |
||||
{ name: "工单业务类型", show: false }, |
||||
{ name: "业务类型", show: true }, |
||||
{ name: "端口", show: false }, |
||||
{ name: "PPPoe账号", show: true }, |
||||
{ name: "电话号码", show: false }, |
||||
{ name: "系统管理域", show: true }, |
||||
{ name: "是否定制终端", show: false }, |
||||
{ name: "工单接收日期", show: false }, |
||||
{ name: "工单处理日期", show: false }, |
||||
{ name: "设备上线状态", show: false }, |
||||
]); |
||||
const changeColumns = (newColumns: TableColumns[]) => { |
||||
columns.value = newColumns; |
||||
}; |
||||
const resetSelect = () => { |
||||
queryForm.value.selectValue = undefined; |
||||
}; |
||||
|
||||
const handleQuery = () => { |
||||
if ( |
||||
queryForm.value.selectName === undefined || |
||||
queryForm.value.selectValue === undefined |
||||
) { |
||||
ElMessage({ |
||||
message: "查询条件不能为空", |
||||
type: "error", |
||||
duration: 1000, |
||||
}); |
||||
return; |
||||
} |
||||
loading.value = true; |
||||
oderMergeTablePage(queryForm.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const skipOrderEdit = (orderId: number) => { |
||||
router.push({ path: `/resources/merge-order-info-edit/${orderId}` }); |
||||
}; |
||||
const openMergerOrder = () => mergeOrderRef.value.open(); |
||||
const reloadGetData = (logicId?: string) => { |
||||
queryForm.value.selectName = "logicId"; |
||||
queryForm.value.selectValue = logicId; |
||||
handleQuery(); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 0 0; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue