3 changed files with 404 additions and 19 deletions
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="配置常用语"> |
|||
<Button style="margin: 10px 0 20px 20px; width: 100px;" @click.native="onAdd">添加</Button> |
|||
<div class="EventDetail"> |
|||
<Table :data="tableData"> |
|||
<ElTableColumn prop="phrases" label="常用语" width="720" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElInput type="textarea" v-model="scope.row.phrases" :autosize="{ minRows: 2, maxRows: 2 }" |
|||
:maxlength="150" showWordLimit placeholder="请输入常用语内容" /> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn label="操作" width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElButton type="text" style="color: #ea4d2d;" @click.native="onDel(scope.$index)">删除</ElButton> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
|
|||
</div> |
|||
<template #footer> |
|||
<Button style="padding: 0 24px;" @click.native="submitTable">确认</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> |
|||
取消</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Table from '@screen/components/Table.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import request from "@/utils/request"; |
|||
import { Message } from 'element-ui' |
|||
|
|||
|
|||
export default { |
|||
name: 'EventDetail', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Table, |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'update:value' |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
eventType: Number |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
this.getProcess(); |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getProcess() { |
|||
this.tableData = []; |
|||
request({ |
|||
url: `/business/dcEventType/${this.eventType}`, |
|||
method: "get", |
|||
}).then(result => { |
|||
if (result.code != 200) return Message.error(result.msg); |
|||
|
|||
result.data.processConfigList?.forEach(it => { |
|||
const phrs = it.commonPhrases.split(','); |
|||
phrs?.forEach(phr => { |
|||
if (!this.tableData.find(op => op.phrases == phr)) this.tableData.push({ phrases: phr }) |
|||
}) |
|||
|
|||
}) |
|||
|
|||
}) |
|||
|
|||
|
|||
}, |
|||
onAdd() { |
|||
this.tableData.push({ |
|||
phrases: '' |
|||
}) |
|||
}, |
|||
onDel(index) { |
|||
this.tableData.splice(index, 1) |
|||
}, |
|||
submitTable() { |
|||
this.$emit('update:phrasesData', this.tableData) |
|||
this.modelVisible = false; |
|||
console.log(this.tableData) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
height: 768px; |
|||
flex-direction: column; |
|||
|
|||
.video-pic { |
|||
display: flex; |
|||
height: 150px; |
|||
gap: 15px |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<Dialog v-model="modelVisible" title="配置处置流程"> |
|||
<Button style="margin: 10px 0 20px 20px; width: 100px;" @click.native="onAdd">添加</Button> |
|||
<div class="EventDetail"> |
|||
<Table :data="tableData"> |
|||
<ElTableColumn label="步骤" width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
{{ `步骤${scope.$index + 1}` }} |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn prop="phrases" label="处置流程" width="610" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElForm :model="scope.row" inline> |
|||
<ElFormItem label="流程名称"> |
|||
<ElInput v-model="scope.row.processNode" placeholder="请输入流程名称" /> |
|||
</ElFormItem> |
|||
<ElFormItem label="常用语"> |
|||
<ElSelect class="disposal-process-select" v-model="scope.row.commonPhrases" multiple :collapse-tags="true"> |
|||
<ElOption v-for="item in options" :key="item.key || item.value" :label="item.label" |
|||
:value="item.key || item.value"> |
|||
</ElOption> |
|||
</ElSelect> |
|||
</ElFormItem> |
|||
</ElForm> |
|||
<!-- <Form :formList="formList" :dFormData="scope.row" label-width="100px" /> --> |
|||
</template> |
|||
</ElTableColumn> |
|||
<ElTableColumn label="操作" width="110" align="center"> |
|||
<template slot-scope="scope"> |
|||
<ElButton type="text" style="color: #ea4d2d;" @click.native="onDel(scope.$index)">删除</ElButton> |
|||
</template> |
|||
</ElTableColumn> |
|||
</Table> |
|||
|
|||
</div> |
|||
<template #footer> |
|||
<Button style="padding: 0 24px;" @click.native="submitTable">确认</Button> |
|||
<Button :style="{ backgroundColor: '#C9C9C9', padding: '0 24px' }" @click.native="modelVisible = false"> |
|||
取消</Button> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@screen/components/Dialog/index"; |
|||
import Table from '@screen/components/Table.vue'; |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import { Message } from 'element-ui' |
|||
import request from "@/utils/request"; |
|||
|
|||
|
|||
export default { |
|||
name: 'EventDetail', |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Table, |
|||
Form |
|||
}, |
|||
model: { |
|||
prop: 'visible', |
|||
event: 'update:value' |
|||
}, |
|||
props: { |
|||
visible: Boolean, |
|||
phrasesData: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
eventType: Number |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
formList: [ |
|||
{ |
|||
label: "流程名称:", |
|||
key: "scope.row.processNode", |
|||
type: "input", |
|||
options: { |
|||
placeholder: '' |
|||
} |
|||
}, |
|||
{ |
|||
label: "常用语:", |
|||
key: "scope.row.commonPhrases", |
|||
type: "select", |
|||
options: { |
|||
options: [], |
|||
multiple: true |
|||
} |
|||
}, |
|||
], |
|||
options: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
modelVisible: { |
|||
get() { |
|||
if (this.visible) { |
|||
this.getProcess(); |
|||
} |
|||
return this.visible; |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:value', val) |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getProcess() { |
|||
let addFlg = true; |
|||
this.tableData = []; |
|||
this.phrasesData.forEach(it => { |
|||
this.options.push({ |
|||
key: it.phrases |
|||
}) |
|||
addFlg = false; |
|||
}) |
|||
|
|||
request({ |
|||
url: `/business/dcEventType/${this.eventType}`, |
|||
method: "get", |
|||
}).then(result => { |
|||
if (result.code != 200) return Message.error(result.msg); |
|||
this.tableData = result.data.processConfigList; |
|||
this.eventType = result.data.eventType; |
|||
|
|||
result.data.processConfigList?.forEach(it => { |
|||
const phrs = it.commonPhrases.split(','); |
|||
if (addFlg) { |
|||
phrs?.forEach(phr => { |
|||
if (!this.options.find(op => op.key == phr)) this.options.push({ key: phr }) |
|||
}) |
|||
} |
|||
|
|||
it.commonPhrases = phrs |
|||
}) |
|||
|
|||
}) |
|||
|
|||
|
|||
}, |
|||
onAdd() { |
|||
this.tableData.push({ |
|||
// eventType: this.eventType, |
|||
commonPhrases: [], |
|||
processNode: '', |
|||
// nodeNode: 1 |
|||
}) |
|||
}, |
|||
onDel(index) { |
|||
this.tableData.splice(index, 1) |
|||
}, |
|||
submitTable() { |
|||
let data = [] |
|||
this.tableData.forEach((it, index) => { |
|||
data.push({ |
|||
commonPhrases: it.commonPhrases.join(','), |
|||
eventType: this.eventType, |
|||
nodeNode: index + 1, |
|||
processNode: it.processNode |
|||
}) |
|||
}) |
|||
// console.log(data) |
|||
|
|||
request({ |
|||
url: `/business/dcEventType/updateDcProcessConfig`, |
|||
method: "post", |
|||
data: { |
|||
eventType: this.eventType, |
|||
processConfigList: data |
|||
} |
|||
}).then(result => { |
|||
if (result.code != 200) return Message.error(result.msg); |
|||
Message.success(result.msg); |
|||
this.modelVisible = false; |
|||
this.$emit('reInitData', true) |
|||
}) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.EventDetail { |
|||
display: flex; |
|||
gap: 9px; |
|||
width: 836px; |
|||
height: 768px; |
|||
flex-direction: column; |
|||
|
|||
.video-pic { |
|||
display: flex; |
|||
height: 150px; |
|||
gap: 15px |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss"> |
|||
.disposal-process-select { |
|||
.el-tag.el-tag--info { |
|||
background-color: #19546C; |
|||
border-color: #113B4E; |
|||
.el-select__tags-text { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue