From 8fec4ade4d56a4dce7b981f3dac5347f746577b7 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Wed, 18 Aug 2021 15:20:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=94=A8=E6=88=B7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=AB=98=E7=BA=A7=E6=90=9C=E7=B4=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../condition-table/DeComplexOperator.vue     |   7 +-
 .../condition-table/DeComplexSelect.vue       | 101 ++++++++++++++++++
 frontend/src/main.js                          |   3 +-
 frontend/src/views/system/user/index.vue      |   2 +-
 4 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/business/condition-table/DeComplexSelect.vue

diff --git a/frontend/src/components/business/condition-table/DeComplexOperator.vue b/frontend/src/components/business/condition-table/DeComplexOperator.vue
index e0b57b5f22..4f995080b4 100644
--- a/frontend/src/components/business/condition-table/DeComplexOperator.vue
+++ b/frontend/src/components/business/condition-table/DeComplexOperator.vue
@@ -6,6 +6,7 @@
     <div class="fu-operator-component__operator">
       <el-select
         v-model="value"
+        :disabled="disabled"
         class="search-operator"
         :placeholder="$t('fu.search_bar.please_select')"
         :size="configSize"
@@ -35,7 +36,11 @@ export default {
     // eslint-disable-next-line vue/require-default-prop
     operator: String,
     // eslint-disable-next-line vue/require-default-prop
-    operators: Array
+    operators: Array,
+    disabled: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
diff --git a/frontend/src/components/business/condition-table/DeComplexSelect.vue b/frontend/src/components/business/condition-table/DeComplexSelect.vue
new file mode 100644
index 0000000000..d09d56faa7
--- /dev/null
+++ b/frontend/src/components/business/condition-table/DeComplexSelect.vue
@@ -0,0 +1,101 @@
+<template>
+  <de-complex-operator v-model="operator" :label="label" :operators="operators" :size="configSize" disabled>
+    <el-select
+      v-model="value"
+      class="fu-complex-select"
+      :placeholder="$t('fu.search_bar.please_select')"
+      :size="configSize"
+      clearable
+      v-bind="$attrs"
+    >
+      <el-option v-for="o in options" :key="o.value" :label="o.label" :value="o.value" />
+    </el-select>
+  </de-complex-operator>
+</template>
+
+<script>
+import { ComplexCondition } from 'fit2cloud-ui/src/components/search-bar/model'
+import DeComplexOperator from './DeComplexOperator.vue'
+import Cookies from 'js-cookie'
+
+const MULTIPLE_OPERATORS = [
+  {
+    label: 'fu.search_bar.in',
+    value: 'in'
+  }, {
+    label: 'fu.search_bar.not_in',
+    value: 'not in'
+  }
+]
+const OPERATORS = [
+  {
+    label: 'fu.search_bar.eq',
+    value: 'eq'
+  }, {
+    label: 'fu.search_bar.ne',
+    value: 'ne'
+  }
+]
+
+export default {
+  name: 'DeComplexSelect',
+  components: { DeComplexOperator },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    field: String,
+    // eslint-disable-next-line vue/require-default-prop
+    label: String,
+    // eslint-disable-next-line vue/require-default-prop
+    defaultOperator: String,
+    // eslint-disable-next-line vue/require-default-prop
+    options: Array
+  },
+  data() {
+    return {
+      operator: '',
+      value: ''
+    }
+  },
+  computed: {
+    isMultiple() {
+      const { multiple } = this.$attrs
+      return multiple !== undefined && multiple !== false
+    },
+    operators() {
+      return this.isMultiple ? MULTIPLE_OPERATORS : OPERATORS
+    },
+    valueLabel() {
+      if (this.isMultiple) {
+        const values = []
+        this.value.forEach(v => {
+          values.push(this.getValueLabel(v))
+        })
+        return values.join(', ')
+      }
+      return this.getValueLabel(this.value)
+    },
+    configSize() {
+      return Cookies.get('size') || 'medium'
+    }
+  },
+  methods: {
+    getValueLabel(value) {
+      for (const o of this.options) {
+        if (o.value === value) {
+          return o.label
+        }
+      }
+      return value
+    },
+    getCondition() {
+      if (!this.value) return
+      const { field, label, operator, operatorLabel, value, valueLabel } = this
+      return new ComplexCondition({ field, label, operator, operatorLabel, value, valueLabel })
+    },
+    init() {
+      this.operator = this.defaultOperator || this.operators[0].value
+      this.value = ''
+    }
+  }
+}
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 81003687bd..81b11d9db2 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -21,7 +21,7 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import './utils/dialog'
 import DeComplexInput from '@/components/business/condition-table/DeComplexInput'
-
+import DeComplexSelect from '@/components/business/condition-table/DeComplexSelect'
 import '@/components/canvas/custom-component' // 注册自定义组件
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
@@ -74,6 +74,7 @@ Vue.use(directives)
 Vue.use(message)
 Vue.component('Treeselect', Treeselect)
 Vue.component('DeComplexInput', DeComplexInput)
+Vue.component('DeComplexSelect', DeComplexSelect)
 Vue.config.productionTip = false
 
 Vue.prototype.hasDataPermission = function(pTarget, pSource) {
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index c3c98d5441..3754776dd0 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -206,7 +206,7 @@ export default {
           {
             field: 'u.enabled',
             label: this.$t('commons.status'),
-            component: 'FuComplexSelect',
+            component: 'DeComplexSelect',
             options: [
               { label: this.$t('commons.enable'), value: '1' },
               { label: this.$t('commons.disable'), value: '0' }