From b76c720ec2e0ceec369511526e55a390679522cd Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Fri, 2 Feb 2024 17:16:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=BD=AE=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commonPhrases/index.vue                   | 122 ++++++++++
 .../disposalProcess/index.vue                 | 214 ++++++++++++++++++
 .../emergencyProcessManagement/index.vue      |  87 +++++--
 3 files changed, 404 insertions(+), 19 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
new file mode 100644
index 00000000..56ced59a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/commonPhrases/index.vue
@@ -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>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue
new file mode 100644
index 00000000..29785a60
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/disposalProcess/index.vue
@@ -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>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/index.vue
index 10d283df..299daae3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/emergencyProcessManagement/index.vue
@@ -2,7 +2,7 @@
   <div class='emergencyProcessManagement'>
 
     <!-- 搜索栏 -->
-    <div class="filter">
+    <!-- <div class="filter">
       <div>
         <ButtonGradient>
           <template #prefix>
@@ -12,27 +12,35 @@
         </ButtonGradient>
 
       </div>
-    </div>
+    </div> -->
 
     <!-- 内容 -->
     <div class="body">
       <Table :data="tableData">
         <ElTableColumn label="" width="60" />
-        <ElTableColumn prop="date" label="事件类型" width="240" />
-        <ElTableColumn prop="name" label="处置流程" />
+        <ElTableColumn prop="eventName" label="事件类型" width="240" />
+        <ElTableColumn prop="processConfig" label="处置流程" />
         <ElTableColumn label="操作" width="210">
           <template slot-scope="scope">
-            <ElButton type="text" style="color: #00EBC1;">配置常用语</ElButton>
-            <ElButton type="text" style="color: #00D1FF;">修改</ElButton>
-            <ElButton type="text" style="color: #FF5F5F;">删除</ElButton>
+            <ElButton type="text" style="color: #00EBC1;" @click="showPhrases(scope.row.eventType)">常用语</ElButton>
+            <ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row.eventType)">流程配置</ElButton>
           </template>
         </ElTableColumn>
       </Table>
     </div>
 
+    <!-- 配置常用户弹窗 -->
+    <CommonPhrases :visible="isShowPhrases" :eventType="eventType" @update:value="onClosePhrases" @update:phrasesData="onUpdatePhrasesData"/>
+    <!-- "流程配置"弹出框 -->
+    <DisposalProcess :visible="isShowDisposal" :eventType="eventType" :phrasesData="phrasesData" @update:value="onCloseDisposal" @reInitData="initData"/>
+
+
     <!-- 分页 -->
     <div class="footer">
-      <Pagination :total="90" />
+      <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'" :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
+        :total="total">
+      </Pagination>
     </div>
   </div>
 </template>
@@ -41,29 +49,70 @@
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
 import Pagination from '@screen/components/Pagination.vue';
 import Table from '@screen/components/Table.vue';
+import CommonPhrases from './commonPhrases';
+import DisposalProcess from './disposalProcess';
+import request from "@/utils/request";
+import { Message } from 'element-ui'
 
 export default {
   name: 'emergencyProcessManagement',
   components: {
     ButtonGradient,
     Pagination,
-    Table
+    Table,
+    CommonPhrases,
+    DisposalProcess
   },
   data() {
     return {
-      tableData: [
-        {
-          date: '车辆故障',
-          name: '报警记录-指令下达-清障到达-安全防护-开始清障-清障结束-恢复畅通',
-        },
-        {
-          date: '处置流程',
-          name: '事件接报-指令下达-事件处置-事件解除',
-        }
-      ]
+      tableData: [],
+      isShowPhrases: false,
+      isShowDisposal: false,
+      total: 20,
+      eventType: 1,
+      searchData: {
+        pageSize: 20,
+        pageNum: 1,
+      },
+      phrasesData: []
     }
   },
+  created() {
+    this.initData();
+  },
   methods: {
+    initData() {
+      request({
+        url: `/business/dcEventType/list`,
+        method: "get",
+        params: this.searchData,
+      }).then((result) => {
+        if (result.code != 200) return Message.error(result?.msg);
+        this.tableData = result.rows;
+        this.total = result.total;
+      });
+    },
+    onSizeChange(pageSize) {
+      this.searchData.pageSize = pageSize;
+      this.getData();
+    },
+    showPhrases(eventType) {
+      this.isShowPhrases = true;
+      this.eventType = eventType;
+    },
+    showDisposal(eventType) {
+      this.isShowDisposal = true;
+      this.eventType = eventType;
+    },
+    onClosePhrases() {
+      this.isShowPhrases = false
+    },
+    onCloseDisposal() {
+      this.isShowDisposal = false;
+    },
+    onUpdatePhrasesData(phrasesData){
+      this.phrasesData = phrasesData;
+    }
   }
 }
 </script>