最终版本

src/api/emport/Emport.js

@@ -462,3 +462,44 @@ export function getAllTemplateRule(templateId) {
         params:{templateId}
     })
 }
+
+
+/**
+ * 新增规则
+ * @param data
+ * @returns {*}
+ */
+export function addRuleByTemplate(data) {
+    return request({
+        url: `${prefix}/rule/template`,
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 修改规则
+ * @param data
+ * @returns {*}
+ */
+export function updateRuleByTemplate(data) {
+    return request({
+        url: `${prefix}/rule/template`,
+        method: 'put',
+        data
+    })
+}
+
+/**
+ * 删除规则
+ * @param ruleId
+ * @param templateId
+ * @returns {*}
+ */
+export function deleteRuleByTemplate(ruleId,templateId) {
+    return request({
+        url: `${prefix}/rule/template`,
+        method: 'delete',
+        params:{ruleId,templateId}
+    })
+}

src/utils/document/StringUtil.js

@@ -31,4 +31,8 @@ export default class StringUtil {
             return !this.isEmpty(item)
         }).join(" - ")
     }
+
+    static mergeRule(code,title){
+        return `${code}（${title?title:''}）`
+    }
 }

src/views/emport/rule/ArraySelect.vue

+<template>
+    <div>
+        <i class="el-icon-circle-plus-outline" style="cursor: pointer" @click="addFirst"></i>
+        <div v-for="(item,index) in arr1">
+            <el-select :value="item" :value-key="config.value" filterable
+                       size="small"
+                       @change="(v)=>doSelectFirst(v,index)"
+            >
+                <el-option v-for="item in data" :key="item[config.value]"
+                           :label="item[config.label]"
+                           :value="item[config.value]+''">
+                    <el-tooltip :disabled="item[config.label].length < 17" placement="top">
+                        <div slot="content">
+                            <span>{{ item[config.label] }}</span>
+                        </div>
+                        <div style="max-width: 500px;">{{ item[config.label] }}</div>
+                    </el-tooltip>
+                </el-option>
+            </el-select>
+            <i class="el-icon-remove-outline" style="cursor: pointer;margin-left: 4px" @click="removeFirst(index)"></i>
+        </div>
+        <el-divider  class="divider" />
+        <i class="el-icon-circle-plus-outline" style="cursor: pointer" @click="addSecond"></i>
+        <div v-for="(item,index) in arr2">
+            <el-select :key="item" :value="item" :value-key="config.value" filterable
+                       size="small"
+                       @change="(v)=>doSelectSecond(v,index)"
+            >
+                <el-option v-for="item in data" :key="item[config.value]"
+                           :label="item[config.label]"
+                           :value="item[config.value]+''">
+                    <el-tooltip :disabled="item[config.label].length < 17" placement="top">
+                        <div slot="content">
+                            <span>{{ item[config.label] }}</span>
+                        </div>
+                        <div style="max-width: 500px;">{{ item[config.label] }}</div>
+                    </el-tooltip>
+                </el-option>
+            </el-select>
+            <i class="el-icon-remove-outline" style="cursor: pointer;margin-left: 4px" @click="removeSecond(index)"></i>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ArraySelect',
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+        config: {
+            type: Object,
+            default: () => {
+                return {
+                    label: 'label',
+                    value: 'value'
+                }
+            }
+        }
+    },
+    model: {
+        prop: 'value',
+        event: 'changeValue'
+    },
+    computed: {
+        arr1() {
+            let split = this.value.split('=')
+            if (split && split.length > 0) {
+                return split[0].split(',')
+            }
+            return []
+        },
+        arr2() {
+            let split = this.value.split('=')
+            if (split && split.length > 1) {
+                return split[1].split(',')
+            }
+            return []
+        }
+    },
+    methods: {
+        addFirst() {
+            let split = this.value.split('=')
+            if (split.length === 1) {
+                this.$emit('changeValue', split[0] + ',=')
+            } else if (split.length === 2) {
+                this.$emit('changeValue', split[0] + ',=' + split[1])
+            }
+            this.$forceUpdate()
+        },
+        addSecond() {
+            let split = this.value.split('=')
+            if (split.length === 1) {
+                this.$emit('changeValue', split[0] + '=')
+            } else if (split.length === 2) {
+                this.$emit('changeValue', split[0] + '=' + split[1] + ',')
+            }
+            this.$forceUpdate()
+        },
+        doSelectFirst(value, index) {
+            let split = this.value.split('=')
+            let arr = split[0].split(',')
+            arr[index] = value
+            this.$emit('changeValue', arr.join(',') + '=' + split[1] )
+            this.$forceUpdate()
+        },
+        doSelectSecond(value, index) {
+            let split = this.value.split('=')
+            let arr = split[1].split(',')
+            arr[index] = value
+            this.$emit('changeValue', split[0] + '=' + arr.join(','))
+            this.$forceUpdate()
+        },
+        removeFirst(index){
+            let split = this.value.split('=')
+            let arr = split[0].split(',')
+            arr.splice(index, 1)
+            this.$emit('changeValue', arr.join(',') + '=' + split[1] )
+            this.$forceUpdate()
+        },
+        removeSecond(index){
+            let split = this.value.split('=')
+            let arr = split[1].split(',')
+            arr.splice(index, 1)
+            this.$emit('changeValue', split[0] + '=' + arr.join(','))
+            this.$forceUpdate()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.divider{
+    margin: 8px;
+}
+</style>