vue2-client 1.9.187 → 1.9.189

package/docs//345/207/275/346/225/260/344/275/277/347/224/250/347/233/270/345/205/263.md

@@ -1,31 +1,36 @@
 # function总体说明
+
 - function的参数，与具体事件有关系。可以在函数里，通过console.log('>>>参数', arguments)显示参数内容。
 - 如果function的参数里没有需要的数据，用this.函数/属性，可以取需要的内容，具体内容，与组件类型有关。
 - 用this.函数函数调用方式调用相应功能。
 
 # 通过this可以调用的函数
+
 - openDialog(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
 - openDialog(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
 - openDrawer(configName, selectedId, mixinData)：打开一个对话框，例如：this.openDialog('xxx', 5, {})
 - openDrawer(configName, selectedId, mixinData, outEnv, attr)：打开一个对话框：
-  * selectId：id号，formtable选择时，用selectId过滤数据 可以传递 json {a_id: 1} 或者 传递 1  ，传递数值会默认拼接查询条件 {selected_id:1}
-  * mixinData: form表单需要的数据
-  * outEnv: 传递给打开的界面的数据，在打开界面的js中通过this.outEnv可以访问
-  * attr: 用于传递参数绑定到 modal 弹框上
+  - selectId：id号，formtable选择时，用selectId过滤数据 可以传递 json {a_id: 1} 或者 传递 1  ，传递数值会默认拼接查询条件 {selected_id:1}
+  - mixinData: form表单需要的数据
+  - outEnv: 传递给打开的界面的数据，在打开界面的js中通过this.outEnv可以访问
+  - attr: 用于传递参数绑定到 modal 弹框上
 - getOutEnv 获取获取 outEnv
 - this.getRealKeyData(obj) 获取真实的数据 传递 {a_a:"1"} 返回 {a:"1"}
 
 ```js
 this.openDialog('xxx', 5, {}, {}, {})
 ```
+
 - runLogic(logicName, parameter): 运行业务逻辑, 例如: this.runLogic('xxx', {})
 
 # 如何调用珊格中组件的数据及函数
+
 - 先给组件起名字，命名规范：main，left，right，top，bottom
 - 用 this.getComponentByName('main') 拿到组件。
 - emitEvent(eventName, ...args) 发送事件到外部珊格
 
 # x-form-table 可以使用的函数/数据
+
 - table_selectedRowKeys 获取选中的id  /不用加 () 这是一个data 中的变量
 - table_selectedRows 获取选中的行  /不用加 () 这是一个data 中的变量
 - getSelectedId 获取获取selectedid
@@ -42,11 +47,11 @@ this.openDialog('xxx', 5, {}, {}, {})
 - validateTableAndSyncData (currRow, defaultAppendRowData) 本地编辑模式下校验表格并同步本地数据
 - 事件相关
   - 行编辑时，下拉选中处理，function (form,setForm,attr,util,self)
-    * form 当前编辑行
-    * setForm(form, {})给编辑行设置值
-    * attr.selectRows[] 选中的数据
-    * util 可以使用的工具方法
-    * self x-form-table组件自身
+    - form 当前编辑行
+    - setForm(form, {})给编辑行设置值
+    - attr.selectRows[] 选中的数据
+    - util 可以使用的工具方法
+    - self x-form-table组件自身
   - afterSubmit( type(新增/修改/擦和讯), id: (所操作的主键id), form: (请求的表单内容))  提交后触发
   - afterQuery( res (查询后数据), querparams (查询参数)) 查询后触发
   - curdAddBefore(func) 点击新增按钮时触发 传参为 打开新增表单函数
@@ -54,9 +59,11 @@ this.openDialog('xxx', 5, {}, {}, {})
     action(record (当前记录), id （当前记录主键）, actionType （操作类型）) 操作按钮触发
 
 # x-report 插槽 使用说明
+
 - init(configName,configData) 配置名称 / 报表数据
 - setData(configData) 主动设置数据
 - 当使用 openDialog 打开报表时，会自动调用 init 方法，传递参数为打开弹框时传递的 **mixinData**
+
   ```js
       this.$refs.main.openDialog('ceshishange',
       -1,
@@ -65,6 +72,7 @@ this.openDialog('xxx', 5, {}, {}, {})
       }
     )
   ```
+
 - 当没有 openDialog 打开报表时，需要手动调用 init 方法 或者 setData，传递参数为需要的数据
 
 # form 简易表单
@@ -76,11 +84,13 @@ this.openDialog('xxx', 5, {}, {}, {})
   - onSubmit(form) 表单提交事件
 
 # 每种事件处理，传递给function的参数
+
 - 添加处理：空
 - action：（操作行数据)
 - 自定义按钮：（选中的所有行)
 
 # 例子
+
 function() {
   // 获取主formtable组件
   main = this.getComponentByName('main')
@@ -98,6 +108,7 @@ function() {
   return runLogic('logic', {res})
 }
 ```
+
 ### OpenDialog 弹框确认事件
 
 ```js
@@ -110,6 +121,7 @@ function() {
 ## 执行自定义函数之后 刷新和提示说明
 
 ### 前端函数写法
+
 ```js
 function () {
   if (id) {
@@ -131,7 +143,9 @@ function () {
 //  messageType : "提示级别", 默认值为 "success" 可自定义传  success | warn | info | error
 // }
 ```
+
 ### Logic 写法
+
 ```go
   validate {
       id: {
@@ -146,7 +160,9 @@ function () {
   }
 
 ```
+
 或者
+
 ```go
   data.a == 3 : (
     return  {

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@vue2-client/*": ["src/*"]
+    },
+    "jsx": "preserve",
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitAny": false
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.9.187",
+  "version": "1.9.189",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

@@ -5,7 +5,7 @@
     :title="resolvedTitle? resolvedTitle : businessTitle"
     :visible="visible"
     :width="`${xAddFormLayoutWidth}vw`"
-    :zIndex="20"
+    :zIndex="101"
     okText="提交"
     @cancel="close"
     @ok="$refs.nativeForm.onSubmit()">

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

@@ -854,7 +854,17 @@ export default {
           }
         }
         for (const item of this.silenceAddJsonData.filter((item) => item.silencePurpose === 'customize')) {
-          form[item.model] = await runLogic(item.silenceSource, form, this.serviceName)
+          let result = await runLogic(item.silenceSource, form, this.serviceName);
+          if (result) {
+            let keys = Object.keys(result);
+            if (keys.length === 1 && keys[0] === 'value') {
+              form[item.model] = result.value;
+            } else {
+              form[item.model] = result;
+            }
+          } else {
+            form[item.model] = result;
+          }
         }
       }
     },

package/src/base-client/components/common/XTagGroup/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="tag-group">
+    <slot>
+      <a-tag
+        v-for="(tag, index) in options"
+        :key="index"
+        :color="tag.color"
+      >
+        {{ tag.label }}
+      </a-tag>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.tag-group {
+  display: flex;
+}
+
+.tag-group .ant-tag {
+  border-radius: 5px;
+  margin-right: 0px;
+  min-width: 1.5rem;
+  min-height: 1rem;
+}
+
+.tag-group .ant-tag:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.tag-group .ant-tag:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.tag-group .ant-tag:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+</style>

package/src/components/checkbox/ImgCheckbox.vue

@@ -1,83 +1,18 @@
 <template>
   <a-tooltip :title="title" :overlayStyle="{zIndex: 2001}">
     <div class="img-check-box" @click="toggle">
-      <img :src="img" alt=""/>
-      <div v-if="sChecked" class="check-item">
-        <a-icon type="check" />
+      <img :src="img" alt="" v-if="type === 'img'">
+      <a-icon v-else :type="icon" style="font-size: 2rem" :class="sChecked?'sChecked iconCheck':'iconCheck'"/>
+      <div v-if="sChecked && type === 'img'" class="check-item">
+        <a-icon type="check"/>
       </div>
     </div>
   </a-tooltip>
 </template>
 
 <script>
-const Group = {
-  name: 'ImgCheckboxGroup',
-  props: {
-    multiple: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    defaultValues: {
-      type: Array,
-      required: false,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      values: [],
-      options: []
-    }
-  },
-  provide () {
-    return {
-      groupContext: this
-    }
-  },
-  watch: {
-    values: function (value) {
-      this.$emit('change', value)
-      // // 此条件是为解决单选时，触发两次chang事件问题
-      // if (!(newVal.length === 1 && oldVal.length === 1 && newVal[0] === oldVal[0])) {
-      //   this.$emit('change', this.values)
-      // }
-    }
-  },
-  methods: {
-    handleChange (option) {
-      if (!option.checked) {
-        if (this.values.indexOf(option.value) > -1) {
-          this.values = this.values.filter(item => item !== option.value)
-        }
-      } else {
-        if (!this.multiple) {
-          this.values = [option.value]
-          this.options.forEach(item => {
-            if (item.value !== option.value) {
-              item.sChecked = false
-            }
-          })
-        } else {
-          this.values.push(option.value)
-        }
-      }
-    }
-  },
-  render (h) {
-    return h(
-      'div',
-      {
-        attrs: { style: 'display: flex' }
-      },
-      [this.$slots.default]
-    )
-  }
-}
-
 export default {
   name: 'ImgCheckbox',
-  Group,
   props: {
     checked: {
       type: Boolean,
@@ -86,7 +21,15 @@ export default {
     },
     img: {
       type: String,
-      required: true
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'img'
+    },
+    icon: {
+      type: String,
+      default: ''
     },
     // eslint-disable-next-line vue/require-prop-types
     value: {
@@ -118,7 +61,7 @@ export default {
     const groupContext = this.groupContext
     if (groupContext) {
       this.sChecked = groupContext.defaultValues.length > 0 ? groupContext.defaultValues.indexOf(this.value) >= 0 : this.sChecked
-      groupContext.options.push(this)
+      groupContext.datas.push(this)
     }
   },
   methods: {
@@ -142,22 +85,33 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .img-check-box{
-    margin-right: 16px;
-    position: relative;
-    border-radius: 4px;
-    cursor: pointer;
-    .check-item{
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 100%;
-      padding-top: 15px;
-      padding-left: 24px;
-      height: 100%;
-      color: @primary-color;
-      font-size: 14px;
-      font-weight: bold;
-    }
+.sChecked {
+  color: @primary-color;
+}
+
+.iconCheck {
+  padding: 5px;
+  border: 1px solid;
+  border-radius: 12px;
+}
+
+.img-check-box {
+  margin-right: 16px;
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+
+  .check-item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    padding-top: 15px;
+    padding-left: 24px;
+    height: 100%;
+    color: @primary-color;
+    font-size: 14px;
+    font-weight: bold;
   }
+}
 </style>

package/src/components/checkbox/ImgCheckboxGroup.vue

@@ -0,0 +1,76 @@
+<script>
+export default {
+  name: 'ImgCheckboxGroup',
+  components: {
+    ImgCheckbox: () => import('./ImgCheckbox')
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    defaultValues: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      values: [],
+      datas: [],
+    }
+  },
+  provide () {
+    return {
+      groupContext: this
+    }
+  },
+  watch: {
+    values: function (value) {
+      this.$emit('change', value)
+    }
+  },
+  methods: {
+    handleChange (option) {
+      if (!option.checked) {
+        if (this.values.indexOf(option.value) > -1) {
+          this.values = this.values.filter(item => item !== option.value)
+        }
+      } else {
+        if (!this.multiple) {
+          this.values = [option.value]
+          this.datas.forEach(item => {
+            if (item.value !== option.value) {
+              item.sChecked = false
+            }
+          })
+        } else {
+          this.values.push(option.value)
+        }
+      }
+    }
+  },
+}
+</script>
+
+<template>
+  <div style="display: flex">
+    <slot>
+      <img-checkbox
+        v-for="(item, index) in options"
+        :key="index"
+        v-bind="item"
+      />
+    </slot>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/components/checkbox/index.js

@@ -1,7 +1,9 @@
 import ColorCheckbox from '@vue2-client/components/checkbox/ColorCheckbox'
 import ImgCheckbox from '@vue2-client/components/checkbox/ImgCheckbox'
+import ImgCheckboxGroup from '@vue2-client/components/checkbox/ImgCheckboxGroup'
 
 export {
   ColorCheckbox,
-  ImgCheckbox
+  ImgCheckbox,
+  ImgCheckboxGroup
 }

package/src/components/g2Charts/constants.js

@@ -0,0 +1,202 @@
+// 添加类型定义
+/**
+ * @typedef {Object} ChartConfig
+ * @property {string} type - 图表类型
+ * @property {string[]} chartsTools - 图表工具
+ * @property {string} dataSource - 数据源
+ * @property {string} xField - 横轴字段
+ * @property {string} xFieldSortBy - 排序依据
+ * @property {string} xFieldSortType - 排序方式
+ * @property {string} yFieldType - 纵轴类型
+ * @property {Array<{field: string, mold: string}>} yField - 纵轴字段
+ */
+
+export const colorItems = [
+  [
+    { label: '', color: '#3371EC' },
+    { label: '', color: '#1CCEC0' },
+    { label: '', color: '#FFC60A' },
+    { label: '', color: '#ED6D0C' },
+    { label: '', color: '#DCA1E5' },
+    { label: '', color: '#25B2E7' }
+  ],
+  [
+    { label: '', color: '#F5222D' },
+    { label: '', color: '#FA541C' },
+    { label: '', color: '#FA8C16' },
+    { label: '', color: '#FAAD14' },
+    { label: '', color: '#FADB14' },
+    { label: '', color: '#A0D911' }
+  ],
+  [
+    { label: '', color: '#52C41A' },
+    { label: '', color: '#13C2C2' },
+    { label: '', color: '#1890FF' },
+    { label: '', color: '#2F54EB' },
+    { label: '', color: '#722ED1' },
+    { label: '', color: '#EB2F96' }
+  ],
+  [
+    { label: '', color: '#0F58FF' },
+    { label: '', color: '#2B6BFF' },
+    { label: '', color: '#467EFF' },
+    { label: '', color: '#6392FE' },
+    { label: '', color: '#81A6FF' },
+    { label: '', color: '#B7CDFF' }
+  ],
+  [
+    { label: '', color: '#34C623' },
+    { label: '', color: '#44DB34' },
+    { label: '', color: '#62E153' },
+    { label: '', color: '#80E774' },
+    { label: '', color: '#9DEC93' },
+    { label: '', color: '#D7F6D4' }
+  ],
+  [
+    { label: '', color: '#FF8800' },
+    { label: '', color: '#FF951D' },
+    { label: '', color: '#FFA33B' },
+    { label: '', color: '#FFAF56' },
+    { label: '', color: '#FFBE74' },
+    { label: '', color: '#FFD8AD' }
+  ],
+  [
+    { label: '', color: '#FF160F' },
+    { label: '', color: '#FE322B' },
+    { label: '', color: '#FF4E48' },
+    { label: '', color: '#FE6962' },
+    { label: '', color: '#FF847F' },
+    { label: '', color: '#FFB9B7' }
+  ],
+  [
+    { label: '', color: '#000000' },
+    { label: '', color: '#222222' },
+    { label: '', color: '#444444' },
+    { label: '', color: '#666666' },
+    { label: '', color: '#888888' },
+    { label: '', color: '#CCCCCC' }
+  ],
+  [
+    { label: '', color: '#2A004E' },
+    { label: '', color: '#500073' },
+    { label: '', color: '#C62300' },
+    { label: '', color: '#F14A00' },
+    { label: '', color: '#FFC145' },
+    { label: '', color: '#ECE852' }
+  ],
+  [
+    { label: '', color: '#7C444F' },
+    { label: '', color: '#9F5255' },
+    { label: '', color: '#DF6D2D' },
+    { label: '', color: '#F39E60' },
+    { label: '', color: '#F87A53' },
+    { label: '', color: '#E6C767' }
+  ]
+]
+
+export const chartsTools = [
+  { label: '图例', value: 'legend', match: 'line,bar,pie' },
+  { label: '数据标签', value: 'label', match: 'line,bar,pie' },
+  { label: '坐标轴', value: 'xyVisible', match: 'line,bar' },
+  { label: '数据点', value: 'point', match: 'line' },
+  { label: '网格线', value: 'grid', match: 'line,bar' }
+]
+
+export const dataSourceOptions = [
+  { label: '当前CRUD', value: 'curCrud' },
+  { label: '业务逻辑', value: 'Logic' },
+  { label: 'api', value: 'api', disabled: true }
+]
+
+export const tabList = [{
+  key: '类型与数据',
+  tab: '类型与数据',
+}, {
+  key: '自定义样式',
+  tab: '自定义样式',
+}]
+
+export const chartTypes = [
+  { label: '折线图', value: 'line', icon: 'line-chart', type: 'icon' },
+  { label: '柱状图', value: 'bar', icon: 'bar-chart', type: 'icon' },
+  { label: '圆饼图', value: 'pie', icon: 'pie-chart', type: 'icon' }]
+
+export const sortBy = [
+  {
+    value: 'value',
+    label: '横轴顺序',
+    placeholder: '按照横轴值排序'
+  },
+  {
+    value: 'statistics',
+    label: '统计值',
+    placeholder: '按照统计值大小排序'
+  }
+]
+
+export const sortType = [
+  { label: '正序', value: 'asc' },
+  { label: '倒序', value: 'desc' }
+]
+
+export const yValueType = [
+  {
+    label: '统计字段数值',
+    value: 'sum',
+    molds: [{ label: '求和', value: 'sum' },
+      { label: '最大值', value: 'max' },
+      { label: '最小值', value: 'min' },
+      { label: '平均值', value: 'avg' },
+    ]
+  },
+  {
+    label: '统计记录总数',
+    value: 'count'
+  }
+]
+
+// 数据字段操作选项
+export const operationOptions = [
+  { label: '删除', value: 'delete', icon: 'delete' },
+  { label: '上移', value: 'moveUp', icon: 'arrow-up' },
+  { label: '下移', value: 'moveDown', icon: 'arrow-down' }
+]
+
+// 每种图标的 formLabel 标签不同
+export const fromItemLabelMap = {
+  bar: {
+    xField: '横轴(字段)',
+    yFieldType: '纵轴(字段)',
+  },
+  line: {
+    xField: '横轴(字段)',
+    yFieldType: '纵轴(字段)',
+  },
+  pie: {
+    xField: '扇区分组',
+    yFieldType: '扇区数值',
+  }
+}
+
+export const demoColumn = [{
+  label: '用户姓名',
+  value: 'f_user_name',
+}, {
+  label: '用户编号',
+  value: 'f_userinfo_code',
+}, {
+  label: '用户类型',
+  value: 'f_user_type',
+}, {
+  label: '收款方式',
+  value: 'f_payment',
+}, {
+  label: '收款金额',
+  value: 'f_collection',
+}, {
+  label: '收款公司',
+  value: 'f_orgname',
+}, {
+  label: '收款时间',
+  value: 'f_operate_date',
+}]