|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<ns-drawer |
|
|
|
v-model:visible="visible" |
|
|
|
width="520" |
|
|
|
width="550" |
|
|
|
:title="' '" |
|
|
|
:footer-style="{ textAlign: 'right' }" |
|
|
|
:ok="btnClick" |
|
|
|
@ -9,53 +9,34 @@ |
|
|
|
placement="right" |
|
|
|
@close="handleClose"> |
|
|
|
<a-tabs> |
|
|
|
<a-tab-pane key="1" tab="更新状态">Content of Tab Pane 1</a-tab-pane> |
|
|
|
<a-tab-pane key="2" tab="状态流程"> |
|
|
|
<!-- <a-steps direction="vertical" :current="4"> |
|
|
|
<template v-for="index in 4"> |
|
|
|
<a-step> |
|
|
|
<template #icon> |
|
|
|
<img src="../../../../src/icon/status-off.svg" /> |
|
|
|
</template> |
|
|
|
<template #description> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
width: 400px; |
|
|
|
min-height: 40px; |
|
|
|
background-color: #f8fafc; |
|
|
|
margin-left: 20px; |
|
|
|
border-radius: 4px; /* 设置圆角半径 */ |
|
|
|
padding: 12px; |
|
|
|
"> |
|
|
|
<div style="width: 100%; height: 40px; display: flex; position: relative"> |
|
|
|
<a-tag style="width: 60px; height: 20px; text-align: center" color="#04d919" |
|
|
|
>已完成</a-tag |
|
|
|
> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
left: 30%; |
|
|
|
top: -2px; |
|
|
|
transform: translateX(-50%); |
|
|
|
color: #3a3a3a; |
|
|
|
" |
|
|
|
>李四</div |
|
|
|
> |
|
|
|
<div style="position: absolute; right: 10px; top: -2px; color: #ff7602" |
|
|
|
>2024-03-11 11:30:06</div |
|
|
|
> |
|
|
|
<a-tab-pane key="1" tab="更新状态"> |
|
|
|
<div style="width: 100%; padding: 24px"> |
|
|
|
<a-form ref="formRef" :model="infoObject" :rules="rules"> |
|
|
|
<a-form-item ref="status" label="当前状态" name="status"> |
|
|
|
<a-select |
|
|
|
v-model:value="infoObject.status" |
|
|
|
show-search |
|
|
|
placeholder="请选择设备点位" |
|
|
|
style="width: 85%" |
|
|
|
:options="statusOptions" |
|
|
|
:filter-option="filterDevicePoint" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="备注" name="desc"> |
|
|
|
<a-textarea |
|
|
|
v-model:value="infoObject.desc" |
|
|
|
placeholder="请输入异常描述" |
|
|
|
style="width: 85%" |
|
|
|
:autoSize="{ minRows: 4, maxRows: 4 }" /> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
</div> |
|
|
|
<div style="width: 100%; color: #3a3a3a"> 工单已完成并通过验收 </div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-step> |
|
|
|
</template> |
|
|
|
</a-steps> --> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane key="2" tab="状态流程"> |
|
|
|
<NsSteps v-bind="config" /> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
<template #footer> |
|
|
|
<a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button> |
|
|
|
<!-- <a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button> --> |
|
|
|
<a-button type="primary" @click="btnClick">确定</a-button> |
|
|
|
</template> |
|
|
|
</ns-drawer> |
|
|
|
@ -72,6 +53,14 @@ |
|
|
|
|
|
|
|
setup() { |
|
|
|
const visible = ref(false); |
|
|
|
const infoObject = ref({}); |
|
|
|
const statusOptions = ref([ |
|
|
|
{ value: '0', label: '待处理' }, |
|
|
|
{ value: '1', label: '处理中' }, |
|
|
|
{ value: '2', label: '已完成' }, |
|
|
|
{ value: '3', label: '超时' }, |
|
|
|
{ value: '4', label: '已关闭' }, |
|
|
|
]); |
|
|
|
const logList = ref([ |
|
|
|
{ name: '李四', status: '2' }, |
|
|
|
{ name: '王五', status: '4' }, |
|
|
|
@ -91,6 +80,8 @@ |
|
|
|
}; |
|
|
|
const toggle = (data) => { |
|
|
|
console.log(data, 'data'); |
|
|
|
infoObject.value = logList.value[0]; |
|
|
|
console.log(infoObject.value, 'infoObject.value'); |
|
|
|
visible.value = true; |
|
|
|
}; |
|
|
|
const createOrder = () => { |
|
|
|
@ -120,6 +111,8 @@ |
|
|
|
}); |
|
|
|
}; |
|
|
|
return { |
|
|
|
infoObject, |
|
|
|
statusOptions, |
|
|
|
btnClick, |
|
|
|
createOrder, |
|
|
|
visible, |
|
|
|
@ -131,4 +124,10 @@ |
|
|
|
}, |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style scoped lang="less"></style> |
|
|
|
<style scoped lang="less"> |
|
|
|
:deep(.ant-form-item-label) { |
|
|
|
z-index: 20; |
|
|
|
text-align: right; |
|
|
|
width: 17%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaohy
4 months ago