You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.7 KiB
125 lines
3.7 KiB
9 months ago
|
<template>
|
||
|
|
<ns-drawer
|
||
|
|
v-model:visible="visible"
|
||
|
|
width="550"
|
||
|
|
:title="' '"
|
||
|
|
:footer-style="{ textAlign: 'right' }"
|
||
|
|
:ok="btnClick"
|
||
|
|
:cancel="handleClose"
|
||
|
|
placement="right"
|
||
|
|
@close="handleClose">
|
||
|
|
<a-tabs>
|
||
|
|
<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"
|
||
|
|
:disabled="true"
|
||
|
|
:filter-option="filterDevicePoint" />
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item label="备注" name="desc">
|
||
|
|
<a-textarea
|
||
|
|
v-model:value="infoObject.desc"
|
||
|
|
placeholder="请输入异常描述"
|
||
|
|
:disabled="true"
|
||
|
|
style="width: 85%"
|
||
|
|
:autoSize="{ minRows: 4, maxRows: 4 }" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</div>
|
||
|
|
</a-tab-pane>
|
||
|
|
<a-tab-pane key="2" tab="状态流程">
|
||
|
|
<NsSteps v-bind="config" />
|
||
|
|
</a-tab-pane>
|
||
|
|
</a-tabs>
|
||
|
|
<template #footer>
|
||
|
|
<a-button type="primary" @click="btnClick">确定</a-button>
|
||
|
|
</template>
|
||
|
|
</ns-drawer>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
import { ref, createVNode } from 'vue';
|
||
|
|
import NsSteps from '/@/components/ns-steps.vue';
|
||
|
|
import { NsMessage, NsModal } from '/nerv-lib/component';
|
||
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
components: { NsSteps },
|
||
|
|
|
||
|
|
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', time: '2024-03-10 10:00:00', desc: '完成' },
|
||
|
|
{ name: '王五', status: '4', time: '2024-03-10 10:00:00' },
|
||
|
|
{ name: '王五', status: '3', time: '2024-03-10 10:00:00' },
|
||
|
|
{ name: '王五', status: '1', time: '2024-03-10 10:00:00', desc: '创建工单' },
|
||
|
|
{ name: '赵六', status: '0', time: '2024-03-10 10:00:00' },
|
||
|
|
]);
|
||
|
|
const config = ref({
|
||
|
|
size: logList.value.length,
|
||
|
|
dataSource: logList.value,
|
||
|
|
});
|
||
|
|
const handleClose = () => {
|
||
|
|
visible.value = false;
|
||
|
|
};
|
||
|
|
const btnClick = () => {
|
||
|
|
visible.value = false;
|
||
|
|
};
|
||
|
|
const toggle = (data) => {
|
||
|
|
infoObject.value = { ...logList.value[0] };
|
||
|
|
let statusMap = {
|
||
|
|
0: '待处理',
|
||
|
|
1: '处理中',
|
||
|
|
2: '已完成',
|
||
|
|
3: '超时',
|
||
|
|
4: '已关闭',
|
||
|
|
};
|
||
|
|
let colorMap = {
|
||
|
|
0: '#ff7602',
|
||
|
|
1: '#00a1e6',
|
||
|
|
2: '#04d919',
|
||
|
|
3: '#d9001b',
|
||
|
|
4: '#a6a6a6',
|
||
|
|
};
|
||
|
|
logList.value.forEach((item) => {
|
||
|
|
item.statusName = statusMap[item.status];
|
||
|
|
item.color = colorMap[item.status];
|
||
|
|
item.src = 'status-' + item.status;
|
||
|
|
});
|
||
|
|
visible.value = true;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
infoObject,
|
||
|
|
statusOptions,
|
||
|
|
btnClick,
|
||
|
|
visible,
|
||
|
|
logList,
|
||
|
|
config,
|
||
|
|
handleClose,
|
||
|
|
toggle,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
:deep(.ant-form-item-label) {
|
||
|
|
z-index: 20;
|
||
|
|
text-align: right;
|
||
|
|
width: 17%;
|
||
|
|
}
|
||
|
|
</style>
|