|
|
@@ -1,6 +1,6 @@
|
|
|
<!--
|
|
|
* @Date: 2022-03-24 09:55:13
|
|
|
- * @LastEditTime: 2022-04-26 18:09:34
|
|
|
+ * @LastEditTime: 2022-04-27 15:07:13
|
|
|
* @LastEditors: your name
|
|
|
* @Description: 服务管理-编辑服务
|
|
|
* have a nice day!
|
|
|
@@ -69,35 +69,37 @@
|
|
|
<p class="manageTitle">部署机器</p>
|
|
|
</header>
|
|
|
<main class="content">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <div class="service-edit-card">
|
|
|
- <div
|
|
|
- class="card-button-plus"
|
|
|
- @click="btnPlusClickHandler('machine')"
|
|
|
- >
|
|
|
- <i class="el-icon-plus" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-for="(machine, index) in checkedMachineList"
|
|
|
- :key="machine.id"
|
|
|
- :span="8"
|
|
|
- >
|
|
|
- <div class="service-edit-card">
|
|
|
- <div
|
|
|
- class="card-btn-close"
|
|
|
- @click="removeItem(index, 'machine')"
|
|
|
- >
|
|
|
- <i class="el-icon-close" />
|
|
|
+ <div class="scrollbar">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="showDialog('machine')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ machine.machineName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-for="(machine, index) in checkedMachineList"
|
|
|
+ :key="machine.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-btn-close"
|
|
|
+ @click="removeItem(index, 'machine')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ machine.machineName }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -106,7 +108,7 @@
|
|
|
<header class="title">
|
|
|
<p class="manageTitle">输入</p>
|
|
|
</header>
|
|
|
- <main class="content">
|
|
|
+ <main class="content first-content">
|
|
|
<el-form
|
|
|
ref="inputForm"
|
|
|
class="input-form"
|
|
|
@@ -158,33 +160,38 @@
|
|
|
<header class="title">
|
|
|
<p class="manageTitle">源数据</p>
|
|
|
</header>
|
|
|
- <main class="content">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <div class="service-edit-card">
|
|
|
- <div
|
|
|
- class="card-button-plus"
|
|
|
- @click="btnPlusClickHandler('source')"
|
|
|
- >
|
|
|
- <i class="el-icon-plus" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-for="item in checkedSourceList"
|
|
|
- :key="item.id"
|
|
|
- :span="8"
|
|
|
- >
|
|
|
- <div class="service-edit-card">
|
|
|
- <div class="card-btn-close" @click="removeItem(index, 'source')">
|
|
|
- <i class="el-icon-close" />
|
|
|
+ <main class="content second-content">
|
|
|
+ <div class="scrollbar">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="showDialog('source')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ item.sourceName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-for="item in checkedSourceList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-btn-close"
|
|
|
+ @click="removeItem(index, 'source')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.sourceName }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -194,32 +201,37 @@
|
|
|
<p class="manageTitle">数据处理</p>
|
|
|
</header>
|
|
|
<main class="content">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="8">
|
|
|
- <div class="service-edit-card">
|
|
|
- <div
|
|
|
- class="card-button-plus"
|
|
|
- @click="btnPlusClickHandler('process')"
|
|
|
- >
|
|
|
- <i class="el-icon-plus" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-for="item in checkedProcessList"
|
|
|
- :key="item.id"
|
|
|
- :span="8"
|
|
|
- >
|
|
|
- <div class="service-edit-card">
|
|
|
- <div class="card-btn-close" @click="removeItem(index, 'process')">
|
|
|
- <i class="el-icon-close" />
|
|
|
+ <div class="scrollbar">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-button-plus"
|
|
|
+ @click="showDialog('process')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ item.processName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ v-for="item in checkedProcessList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="8"
|
|
|
+ >
|
|
|
+ <div class="service-edit-card">
|
|
|
+ <div
|
|
|
+ class="card-btn-close"
|
|
|
+ @click="removeItem(index, 'process')"
|
|
|
+ >
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.processName }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -231,39 +243,42 @@
|
|
|
size="small"
|
|
|
type="primary"
|
|
|
class="btn-white"
|
|
|
+ @click="showDialog('output')"
|
|
|
>新增</el-button>
|
|
|
</header>
|
|
|
<main class="content">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col
|
|
|
- v-for="item in targetList"
|
|
|
- :key="item.id"
|
|
|
- :span="24"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="service-edit-card"
|
|
|
- style="height: 160px"
|
|
|
+ <div class="scrollbar">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in targetList"
|
|
|
+ :key="item.id"
|
|
|
+ :span="24"
|
|
|
>
|
|
|
- <div class="card-btn-close">
|
|
|
- <i class="el-icon-close" />
|
|
|
- </div>
|
|
|
- <div class="card-header">
|
|
|
- <span>{{ item.targetName }}</span>
|
|
|
- <i class="icon-edit" />
|
|
|
- </div>
|
|
|
- <div class="card-main">
|
|
|
- <div class="flex">
|
|
|
- <div class="left">目标配置：</div>
|
|
|
- <div
|
|
|
- class="multiple-ellipsis"
|
|
|
- :title="item.config"
|
|
|
- >{{ item.config }}</div>
|
|
|
+ <div
|
|
|
+ class="service-edit-card"
|
|
|
+ style="height: 160px"
|
|
|
+ >
|
|
|
+ <div class="card-btn-close" @click="removeOutputTarget(index)">
|
|
|
+ <i class="el-icon-close" />
|
|
|
+ </div>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>{{ item.protocolType }}</span>
|
|
|
+ <i class="icon-edit" @click="btnEditClickHandler(index, 'output')" />
|
|
|
+ </div>
|
|
|
+ <div class="card-main">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="left">目标配置：</div>
|
|
|
+ <div
|
|
|
+ class="multiple-ellipsis"
|
|
|
+ :title="item.protocolConfig"
|
|
|
+ >{{ item.protocolConfig }}</div>
|
|
|
+ </div>
|
|
|
+ <span>{{ item.targetData }}</span>
|
|
|
</div>
|
|
|
- <span>{{ item.dataSource }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -273,103 +288,110 @@
|
|
|
:flag="dialogVisible"
|
|
|
width="500px"
|
|
|
>
|
|
|
- <template v-if="dialogContentType === 'machine'">
|
|
|
+ <template v-if="['machine', 'source', 'process'].includes(dialogContentType)">
|
|
|
<div class="dialog-checkbox">
|
|
|
- <div class="title">部署机器选择</div>
|
|
|
- <div class="content">
|
|
|
+ <div class="title">{{ getDataInMap(dialogContentType, 'title') }}</div>
|
|
|
+ <main class="content">
|
|
|
<el-checkbox-group v-model="tempCheckedKeys">
|
|
|
<el-checkbox
|
|
|
- v-for="item in machineList"
|
|
|
+ v-for="item in getDataInMap(dialogContentType, 'list')"
|
|
|
:key="item.id"
|
|
|
- :label="item.machineName"
|
|
|
+ :label="item[getDataInMap(dialogContentType, 'label')]"
|
|
|
/>
|
|
|
</el-checkbox-group>
|
|
|
- </div>
|
|
|
+ </main>
|
|
|
<div class="foot">
|
|
|
<el-button
|
|
|
size="medium"
|
|
|
type="primary"
|
|
|
class="r25 r26"
|
|
|
- @click="checkedSubmitHandler('machine')"
|
|
|
+ @click="checkedSubmitHandler(dialogContentType)"
|
|
|
>提交</el-button>
|
|
|
<el-button
|
|
|
size="medium"
|
|
|
class="r26"
|
|
|
- @click="closeDialog()"
|
|
|
- >取消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="dialogContentType === 'source'">
|
|
|
- <div class="dialog-checkbox">
|
|
|
- <div class="title">源数据选择</div>
|
|
|
- <div class="content">
|
|
|
- <el-checkbox-group v-model="tempCheckedKeys">
|
|
|
- <el-checkbox
|
|
|
- v-for="item in sourceList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.sourceName"
|
|
|
- />
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- <div class="foot">
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- type="primary"
|
|
|
- class="r25 r26"
|
|
|
- @click="checkedSubmitHandler('source')"
|
|
|
- >提交</el-button>
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- class="r26"
|
|
|
- @click="closeDialog()"
|
|
|
- >取消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-if="dialogContentType === 'process'">
|
|
|
- <div class="dialog-checkbox">
|
|
|
- <div class="title">部署机器选择</div>
|
|
|
- <div class="content">
|
|
|
- <el-checkbox-group v-model="tempCheckedKeys">
|
|
|
- <el-checkbox
|
|
|
- v-for="item in processList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.processName"
|
|
|
- />
|
|
|
- </el-checkbox-group>
|
|
|
- </div>
|
|
|
- <div class="foot">
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- type="primary"
|
|
|
- class="r25 r26"
|
|
|
- @click="checkedSubmitHandler('process')"
|
|
|
- >提交</el-button>
|
|
|
- <el-button
|
|
|
- size="medium"
|
|
|
- class="r26"
|
|
|
- @click="closeDialog()"
|
|
|
+ @click="closeDialog"
|
|
|
>取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-if="dialogContentType === 'output'">
|
|
|
- <div class="dialog-form">
|
|
|
+ <div id="dialog-form">
|
|
|
<div class="title">数据输出编辑</div>
|
|
|
- <div class="content">
|
|
|
- </div>
|
|
|
+ <main class="content">
|
|
|
+ <el-form
|
|
|
+ ref="outputForm"
|
|
|
+ class="output-form"
|
|
|
+ :model="outputForm"
|
|
|
+ label-position="right"
|
|
|
+ label-width="72px"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="协议类型"
|
|
|
+ prop="protocolType"
|
|
|
+ >
|
|
|
+ <el-select v-model="outputForm.protocolType">
|
|
|
+ <el-option
|
|
|
+ v-for="item in protocolTypeOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="协议配置"
|
|
|
+ prop="protocolConfig"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="outputForm.protocolConfig"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入协议配置"
|
|
|
+ :autosize="{ minRows: 4, maxRows: 4 }"
|
|
|
+ resize="none"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="目标数据"
|
|
|
+ prop="targetData"
|
|
|
+ >
|
|
|
+ <el-select v-model="outputForm.targetData">
|
|
|
+ <el-option
|
|
|
+ v-for="item in targetDataOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="输出条件"
|
|
|
+ prop="outputCondition"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="outputForm.outputCondition"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入输出条件"
|
|
|
+ :autosize="{ minRows: 4, maxRows: 4 }"
|
|
|
+ resize="none"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </main>
|
|
|
<div class="foot">
|
|
|
<el-button
|
|
|
size="medium"
|
|
|
type="primary"
|
|
|
class="r25 r26"
|
|
|
- @click="closeDialog()"
|
|
|
+ @click="outputSubmitHandler"
|
|
|
>提交</el-button>
|
|
|
<el-button
|
|
|
size="medium"
|
|
|
class="r26"
|
|
|
- @click="closeDialog()"
|
|
|
+ @click="closeDialog"
|
|
|
>取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -382,9 +404,24 @@
|
|
|
import Dialog from '@/layout/components/Dialog'
|
|
|
|
|
|
const keyMap = {
|
|
|
- machine: 'checkdeMachineKeys',
|
|
|
- source: 'checkedSourceKeys',
|
|
|
- process: 'checkedProcessKeys'
|
|
|
+ machine: {
|
|
|
+ title: '部署机器选择',
|
|
|
+ list: 'machineList',
|
|
|
+ checked: 'checkedMachineKeys',
|
|
|
+ label: 'machineName'
|
|
|
+ },
|
|
|
+ source: {
|
|
|
+ title: '源数据',
|
|
|
+ list: 'sourceList',
|
|
|
+ checked: 'checkedSourceKeys',
|
|
|
+ label: 'sourceName'
|
|
|
+ },
|
|
|
+ process: {
|
|
|
+ title: '数据处理',
|
|
|
+ list: 'processList',
|
|
|
+ checked: 'checkedProcessKeys',
|
|
|
+ label: 'processName'
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
@@ -403,6 +440,41 @@ export default {
|
|
|
concurrent: null,
|
|
|
config: ''
|
|
|
},
|
|
|
+ outputForm: {
|
|
|
+ protocolType: null,
|
|
|
+ protocolConfig: '',
|
|
|
+ targetData: null,
|
|
|
+ outputCondition: ''
|
|
|
+ },
|
|
|
+ protocolTypeOptions: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ value: 'Kafka',
|
|
|
+ label: 'Kafka'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ value: 'Mysql',
|
|
|
+ label: 'Mysql'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ targetDataOptions: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ value: 'BSM报文',
|
|
|
+ label: 'BSM报文'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ value: 'BSM解析结果',
|
|
|
+ label: 'BSM解析结果'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ value: '行李基础数据',
|
|
|
+ label: '行李基础数据'
|
|
|
+ }
|
|
|
+ ],
|
|
|
sourceOptions: [
|
|
|
{
|
|
|
id: 0,
|
|
|
@@ -433,7 +505,7 @@ export default {
|
|
|
machineName: '存储服务器'
|
|
|
}
|
|
|
],
|
|
|
- checkdeMachineKeys: [],
|
|
|
+ checkedMachineKeys: [],
|
|
|
sourceList: [
|
|
|
{
|
|
|
id: 0,
|
|
|
@@ -461,24 +533,27 @@ export default {
|
|
|
targetList: [
|
|
|
{
|
|
|
id: 0,
|
|
|
- targetName: 'Kafka',
|
|
|
- config:
|
|
|
+ protocolType: 'Kafka',
|
|
|
+ protocolConfig:
|
|
|
'"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
- dataSource: 'BSM报文'
|
|
|
+ targetData: 'BSM报文',
|
|
|
+ outputCondition: ''
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
- targetName: 'Kafka',
|
|
|
- config:
|
|
|
+ protocolType: 'Kafka',
|
|
|
+ protocolConfig:
|
|
|
'"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
- dataSource: 'BSM解析结果'
|
|
|
+ targetData: 'BSM解析结果',
|
|
|
+ outputCondition: ''
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- targetName: 'Mysql',
|
|
|
- config:
|
|
|
+ protocolType: 'Mysql',
|
|
|
+ protocolConfig:
|
|
|
'"bootstrap.servers": "192.168.3.74:9092","key.serializer": "org.apache.kafka.common.serialization.StringSerializer","value.serializerXXXXXXXXXXXXXXXXXXXXXXX',
|
|
|
- dataSource: '行李基础数据'
|
|
|
+ targetData: '行李基础数据',
|
|
|
+ outputCondition: ''
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
@@ -488,7 +563,7 @@ export default {
|
|
|
return Boolean(this.dialogContentType)
|
|
|
},
|
|
|
checkedMachineList() {
|
|
|
- return this.machineList.filter(item => this.checkdeMachineKeys.includes(item.machineName))
|
|
|
+ return this.machineList.filter(item => this.checkedMachineKeys.includes(item.machineName))
|
|
|
},
|
|
|
checkedSourceList() {
|
|
|
return this.sourceList.filter(item => this.checkedSourceKeys.includes(item.sourceName))
|
|
|
@@ -498,19 +573,53 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- btnPlusClickHandler(type) {
|
|
|
- this.tempCheckedKeys = [...this[keyMap[type]]]
|
|
|
+ getDataInMap(type, keyType) {
|
|
|
+ if (['title', 'label'].includes(keyType)) {
|
|
|
+ return keyMap[type][keyType]
|
|
|
+ } else {
|
|
|
+ return this[keyMap[type][keyType]]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDialog(type) {
|
|
|
+ if (Object.keys(keyMap).includes(type)) {
|
|
|
+ this.tempCheckedKeys = [...this[keyMap[type]['checked']]]
|
|
|
+ }
|
|
|
this.dialogContentType = type
|
|
|
},
|
|
|
- checkedSubmitHandler(type) {
|
|
|
- this[keyMap[type]] = [...this.tempCheckedKeys]
|
|
|
- this.dialogContentType = null
|
|
|
+ btnEditClickHandler(index, type) {
|
|
|
+ if (type === 'output') {
|
|
|
+ Object.entries(this.targetList[index]).forEach(arr => {
|
|
|
+ const [key, value] = arr
|
|
|
+ this.outputForm[key] = value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.showDialog(type)
|
|
|
+ },
|
|
|
+ checkedSubmitHandler() {
|
|
|
+ this[keyMap[this.dialogContentType]['checked']] = [...this.tempCheckedKeys]
|
|
|
+ this.closeDialog()
|
|
|
+ },
|
|
|
+ outputSubmitHandler() {
|
|
|
+ const target = {
|
|
|
+ ...this.outputForm
|
|
|
+ }
|
|
|
+ if (typeof target.id === 'undefined') {
|
|
|
+ target.id = this.targetList.at(-1).id + 1
|
|
|
+ this.targetList.push(target)
|
|
|
+ } else {
|
|
|
+ const index = this.targetList.findIndex(element => element.id === target.id)
|
|
|
+ this.targetList[index] = target
|
|
|
+ }
|
|
|
+ this.closeDialog()
|
|
|
},
|
|
|
closeDialog() {
|
|
|
this.dialogContentType = null
|
|
|
},
|
|
|
removeItem(index, type) {
|
|
|
- this[keyMap[type]].splice(index, 1)
|
|
|
+ this[keyMap[type]['checked']].splice(index, 1)
|
|
|
+ },
|
|
|
+ removeOutputTarget(index) {
|
|
|
+ this.targetList.splice(index, 1)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -528,7 +637,7 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
::v-deep .part {
|
|
|
height: 640px;
|
|
|
- padding: 32px 24px 0 24px;
|
|
|
+ padding: 26px 24px 0 24px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 4px;
|
|
|
@@ -540,11 +649,12 @@ export default {
|
|
|
.title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 32px;
|
|
|
+ margin-bottom: 24px;
|
|
|
&:nth-of-type(2) {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.manageTitle {
|
|
|
+ height: 32px;
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
.el-button {
|
|
|
@@ -589,90 +699,108 @@ export default {
|
|
|
}
|
|
|
.content {
|
|
|
margin: 0;
|
|
|
- > .el-row > .el-col {
|
|
|
- margin-bottom: 16px;
|
|
|
- .service-edit-card {
|
|
|
- height: 80px;
|
|
|
- padding: 16px 14px 0 16px;
|
|
|
- background: #f5f7fa;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- position: relative;
|
|
|
- font-family: Helvetica, 'Microsoft YaHei';
|
|
|
- .card-button-plus {
|
|
|
- margin: -16px -14px 0 -16px;
|
|
|
- height: calc(100% + 16px);
|
|
|
- border: 1px dashed #9ebbf7;
|
|
|
- cursor: pointer;
|
|
|
+ &:not(.first-content) {
|
|
|
+ height: calc(100% - 32px - 24px);
|
|
|
+ }
|
|
|
+ &.second-content {
|
|
|
+ height: calc(100% - 297px)
|
|
|
+ }
|
|
|
+ > .scrollbar {
|
|
|
+ margin: -12px -24px 0 0;
|
|
|
+ padding: 12px 24px 28px 0;
|
|
|
+ height: calc(100% + 12px);
|
|
|
+ > .el-row > .el-col {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .service-edit-card {
|
|
|
+ height: 80px;
|
|
|
+ padding: 16px 14px 0 16px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
position: relative;
|
|
|
- .el-icon-plus {
|
|
|
- font-size: 32px;
|
|
|
- color: #9ebbf7;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin: -16px -16px;
|
|
|
- }
|
|
|
- }
|
|
|
- .card-btn-close {
|
|
|
- position: absolute;
|
|
|
- top: -12px;
|
|
|
- right: -12px;
|
|
|
- z-index: 10;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- text-align: center;
|
|
|
- background: #000000;
|
|
|
- opacity: 0.8;
|
|
|
- border-radius: 50%;
|
|
|
- color: #ffffff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .card-header {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- color: #101116;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 32px;
|
|
|
- .icon-edit {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- display: inline-block;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- transition: all 0.3s;
|
|
|
- margin-left: 16px;
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
+ .card-button-plus {
|
|
|
+ margin: -16px -14px 0 -16px;
|
|
|
+ height: calc(100% + 16px);
|
|
|
+ border: 1px dashed #9ebbf7;
|
|
|
cursor: pointer;
|
|
|
- background-image: url('../../../../assets/status/ic_edit_default.png');
|
|
|
- &:hover {
|
|
|
- background-image: url('../../../../assets/status/ic_edit_hovar.png');
|
|
|
+ position: relative;
|
|
|
+ .el-icon-plus {
|
|
|
+ font-size: 32px;
|
|
|
+ color: #9ebbf7;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: -16px -16px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .card-main {
|
|
|
- font-size: 14px;
|
|
|
- font-family: Helvetica, Microsoft YaHei;
|
|
|
- color: #101116;
|
|
|
- .flex {
|
|
|
- margin-bottom: 23px;
|
|
|
- .left {
|
|
|
- padding-right: 9px;
|
|
|
+ .card-btn-close {
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
+ right: -12px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ background: #000000;
|
|
|
+ opacity: 0.8;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ color: #101116;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .icon-edit {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ transition: all 0.3s;
|
|
|
+ margin-left: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url('../../../../assets/status/ic_edit_default.png');
|
|
|
+ &:hover {
|
|
|
+ background-image: url('../../../../assets/status/ic_edit_hovar.png');
|
|
|
+ }
|
|
|
}
|
|
|
- .multiple-ellipsis {
|
|
|
- flex: 1;
|
|
|
- display: -webkit-box;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
+ }
|
|
|
+ .card-main {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Helvetica, Microsoft YaHei;
|
|
|
+ color: #101116;
|
|
|
+ .flex {
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 23px;
|
|
|
+ .left {
|
|
|
+ padding-right: 9px;
|
|
|
+ }
|
|
|
+ .multiple-ellipsis {
|
|
|
+ flex: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ &:nth-last-child(1) .content > .scrollbar > .el-row > .el-col {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
::v-deep .service-form {
|
|
|
@@ -722,5 +850,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ ::v-deep #dialog-form .el-select .el-input__inner {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
