vue2-client 1.15.83 → 1.15.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.15.83",
+  "version": "1.15.84",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -60,6 +60,7 @@
     "viser-vue": "^2.4.8",
     "vue": "^2.7.14",
     "vue-codemirror": "4.0.6",
+    "vue-color": "2.7.0",
     "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "^8.28.2",
     "vue-json-viewer": "^2.2.22",

package/src/base-client/components/common/ColorPickerCombobox/ColorPickerCombobox.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="colorPickerCombobox" style="padding: 4px 0;">
+    <div style="display: flex; width: 100%;">
+      <a-input
+        :value="colorValue"
+        :read-only="readOnly"
+        style="flex: 1; min-width: 0;"
+        placeholder="请选择颜色"
+      />
+      <a-button
+        style="flex-shrink: 0; margin-left: 0.2rem;"
+        @click="visible = true"
+      >
+        选择颜色
+      </a-button>
+    </div>
+    <a-modal
+      v-model="visible"
+      title="颜色选择"
+      @ok="onSelect"
+      :zIndex="1002"
+      :destroyOnClose="true"
+      width="40%"
+    >
+      <chrome-picker
+        :value="tempColor"
+        :disable-alpha="true"
+        @input="onColorChange"
+      />
+      <div style="margin-top: 16px; text-align: center;">
+        <span>当前颜色: <span :style="{ color: tempColor }">{{ tempColor }}</span></span>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { Chrome } from 'vue-color'
+
+export default {
+  name: 'ColorPickerCombobox',
+  components: {
+    'chrome-picker': Chrome
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      colorValue: this.value,
+      tempColor: this.value
+    }
+  },
+  watch: {
+    value (val) {
+      this.colorValue = val
+      this.tempColor = val
+    }
+  },
+  methods: {
+    onColorChange (color) {
+      // color.hex 是 #RRGGBB 格式
+      this.tempColor = color.hex
+    },
+    onSelect () {
+      this.colorValue = this.tempColor
+      this.visible = false
+      this.$emit('onSelect', this.colorValue)
+    },
+    setColor (val) {
+      this.colorValue = val
+      this.tempColor = val
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#colorPickerCombobox {
+  .ant-input {
+    background: #fff;
+  }
+}
+.vc-chrome {
+  width: 100% !important;
+  box-sizing: border-box;
+}
+::v-deep .vc-chrome {
+  width: 100% !important;
+}
+</style>

package/src/base-client/components/common/ColorPickerCombobox/demo.vue

@@ -0,0 +1,34 @@
+<script>
+
+import ColorPickerCombobox from '@vue2-client/base-client/components/common/ColorPickerCombobox/ColorPickerCombobox.vue'
+
+export default {
+  name: 'Demo',
+  components: { ColorPickerCombobox },
+  data () {
+    return {
+      visible: false,
+      searchResult: {}
+    }
+  },
+  methods: {
+    colorPickerComboboxSelect (res) {
+      console.log('===colorPickerComboboxSelect', res)
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <ColorPickerCombobox
+      v-model="searchResult"
+      searchResultType="Object"
+      @onSelect="colorPickerComboboxSelect"
+    ></ColorPickerCombobox>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -472,6 +472,24 @@
       ></address-search-combobox>
     </a-form-model-item>
   </x-form-col>
+  <!-- 颜色选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'colorPicker' && show"
+    :labelCol="labelCol"
+    :flex="attr.flex">
+    <a-form-model-item
+      v-bind="bindOther"
+      :rules="rules"
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <color-picker-combobox
+        :value="form[attr.model]"
+        :read-only="readOnly"
+        @onSelect="colorPickerComboboxSelect"
+      />
+    </a-form-model-item>
+  </x-form-col>
   <!-- 人员选择框 -->
   <x-form-col
     v-else-if="attr.type === 'personSetting' && show"
@@ -697,6 +715,7 @@ import XFormDatePicker from '@vue2-client/base-client/components/common/XDatePic
 import XIntervalPicker from '@vue2-client/base-client/components/common/XIntervalPicker/XIntervalPicker.vue'
 import XRate from '@vue2-client/base-client/components/common/XRate/index.vue'
 import { post } from '@vue2-client/services/api/restTools'
+import ColorPickerCombobox from '@vue2-client/base-client/components/common/ColorPickerCombobox/ColorPickerCombobox.vue'
 
 export default {
   name: 'XFormItem',
@@ -716,7 +735,8 @@ export default {
     XStatusButton,
     XClickChangeBtn,
     XIntervalPicker,
-    XRate
+    XRate,
+    ColorPickerCombobox
   },
   data () {
     // 检索去抖
@@ -1347,6 +1367,9 @@ export default {
       // return document.body
       return triggerNode.parentNode
     },
+    colorPickerComboboxSelect (val) {
+      this.form[this.attr.model] = val
+    },
   }
 }
 </script>

package/src/base-client/components/common/XFormTable/demo.vue

@@ -26,7 +26,7 @@ export default {
   data () {
     return {
       // 查询配置文件名
-      queryParamsName: 'ceshiCRUD',
+      queryParamsName: 'ceshiColorCRUD',
       // 新增表单固定值
       fixedAddForm: {},
       // 是否显示详情抽屉

package/src/router/async/router.map.js

@@ -54,13 +54,13 @@ routerResource.example = {
 path: 'example',
   name: '示例主页面',
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo2.vue'),
-  component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
+  // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/addressSelect/addressDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDescriptions/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
-  // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
+  component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),