three-trees-ui 1.0.0

package/package.json

@@ -0,0 +1,137 @@
+{
+  "name": "three-trees-ui",
+  "version": "1.0.0",
+  "publicPath": "/ui",
+  "author": "hotent",
+  "private": false,
+  "scripts": {
+    "gen": "bash ./scripts/gc.sh",
+    "serve": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js --host 0.0.0.0",
+    "build": "cross-env NODE_ENV=production webpack --config build/webpack.demo.js",
+    "lint": "vue-cli-service lint",
+    "build-bundle": "cross-env NODE_ENV=production vue-cli-service build --target lib --name three-trees-ui ./src/index.js",
+    "test": "vue-cli-service test:unit",
+    "analyz": "cross-env NODE_ENV=production vue-cli-service build --report --target lib --name three-trees-ui ./src/index.js",
+    "publish-local-adduser": "npm adduser --registry=http://www.hotent.xyz:8081/nexus/repository/local-npm/",
+    "publish-local": "npm publish --registry=http://www.hotent.xyz:8081/nexus/repository/local-npm/",
+    "publish-nexus": "npm run build-bundle && npm run publish-local-adduser && npm run publish-local"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  },
+  "main": "lib/three-trees-ui.common.js",
+  "files": [
+    "lib/*",
+    "packages/*",
+    "src/*",
+    "package.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "element-resize-detector": "^1.2.3",
+    "vee-validate": "2.1.7"
+  },
+  "peerDependencies": {
+    "axios": "^0.21.1",
+    "deepmerge": "^4.2.2",
+    "echarts": "~4.2.1",
+    "echarts-stat": "~1.2.0",
+    "element-ui": "^2.15.6",
+    "html2canvas": "^1.0.0-rc.7",
+    "image-conversion": "^2.1.1",
+    "jquery": "^3.4.1",
+    "js-base64": "^2.5.1",
+    "jszip": "^3.7.1",
+    "panzoom": "^9.4.2",
+    "pdfjs-dist": "2.5.207",
+    "qrcode": "~1.4.4",
+    "vue": "2.6.12",
+    "vue-amap": "^0.5.10",
+    "vue-i18n": "^8.15.0",
+    "vue-pdf": "4.2.0",
+    "vue-resource": "^1.5.1",
+    "vue-router": "^3.0.0",
+    "vue-showdown": "2.4.1",
+    "vuedraggable": "^2.24.3",
+    "wangeditor": "^4.7.10",
+    "xlsx": "^0.16.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.0",
+    "@babel/runtime-corejs3": "^7.19.0",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.19.0",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-unit-jest": "^4.0.5",
+    "@vue/cli-service": "^3.8.0",
+    "@vue/component-compiler-utils": "^2.6.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "algoliasearch": "^3.24.5",
+    "axios": "^0.21.1",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.2.5",
+    "babel-polyfill": "6.26.0",
+    "body-parser": "^1.19.0",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.5.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "clipboard": "^2.0.8",
+    "compression-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.3",
+    "deepmerge": "^4.2.2",
+    "echarts": "~4.2.1",
+    "echarts-stat": "~1.2.0",
+    "element-theme-chalk": "^2.12.0",
+    "element-ui": "2.15.8",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "file-saver": "^2.0.2",
+    "html2canvas": "^1.0.0-rc.7",
+    "image-conversion": "^2.1.1",
+    "jquery": "^3.4.1",
+    "js-base64": "^2.5.1",
+    "jszip": "^3.7.1",
+    "markdown-it": "^8.4.1",
+    "markdown-it-anchor": "7.1.0",
+    "markdown-it-chain": "^1.3.0",
+    "markdown-it-container": "^2.0.0",
+    "mockjs": "^1.1.0",
+    "moment": "^2.29.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "panzoom": "^9.4.2",
+    "pdfjs-dist": "2.5.207",
+    "progress-bar-webpack-plugin": "^1.11.0",
+    "qrcode": "~1.4.4",
+    "sass": "~1.32.10",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^0.23.1",
+    "transliteration": "^1.1.11",
+    "uglifyjs-webpack-plugin": "^2.1.1",
+    "vant": "^2.12.44",
+    "vue": "2.6.12",
+    "vue-amap": "^0.5.10",
+    "vue-clipboard2": "^0.3.1",
+    "vue-highlightjs": "^1.3.3",
+    "vue-i18n": "^8.15.0",
+    "vue-md-loader": "^1.1.9",
+    "vue-pdf": "4.2.0",
+    "vue-resource": "^1.5.1",
+    "vue-router": "3.0.1",
+    "vue-showdown": "2.4.1",
+    "vue-template-compiler": "2.6.12",
+    "vuedraggable": "^2.24.3",
+    "wangeditor": "^4.6.12",
+    "webpack": "^4.14.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.11",
+    "webpack-node-externals": "^1.7.2",
+    "xlsx": "^0.16.6"
+  },
+  "license": "MIT"
+}

package/packages/AddQueryStrategy/index.js

@@ -0,0 +1,7 @@
+import AddQueryStrategy from './src/main.vue'
+
+AddQueryStrategy.install = function(Vue) {
+  Vue.component(AddQueryStrategy.name, AddQueryStrategy)
+}
+
+export default AddQueryStrategy

package/packages/AddQueryStrategy/src/main.vue

@@ -0,0 +1,236 @@
+<template>
+  <el-dialog
+    title="新建查询策略"
+    :visible.sync="dialogVisible"
+    width="60%"
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="策略名称">
+        <el-input
+          v-model="form.strategyName"
+          v-validate="'required'"
+          size="mini"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="查询条件">
+        <el-row v-for="(item, index) in form.querys" :key="index">
+          <el-col :span="6">
+            <el-select
+              v-model="item.field"
+              size="mini"
+              clearable
+              placeholder="请选择"
+              @change="changeField(item)"
+            >
+              <el-option
+                v-for="(option, subIndex) in fieldOptions"
+                :key="subIndex"
+                :label="option.label"
+                :value="option"
+              ></el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="6">
+            <el-select
+              v-model="item.operation"
+              size="mini"
+              clearable
+              placeholder="请选择"
+              :disabled="
+                item.field &&
+                  item.field.options &&
+                  item.field.options.length > 0
+              "
+            >
+              <el-option
+                v-for="(queryOP, subIndex) in queryOPs"
+                :key="subIndex"
+                :label="queryOP.label"
+                :value="queryOP.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="9">
+            <el-select
+              v-if="
+                item.field &&
+                  item.field.options &&
+                  item.field.options.length > 0
+              "
+              v-model="item.value"
+              size="mini"
+              clearable
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="(value, subIndex) in item.field.options"
+                :key="subIndex"
+                :label="value"
+                :value="value"
+              ></el-option>
+            </el-select>
+
+            <el-input
+              v-else
+              v-model="item.value"
+              size="mini"
+              placeholder="2019-10-21 - 2019-11-19"
+            ></el-input>
+          </el-col>
+          <el-col :span="3">
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              @click="removeQuerys(item)"
+            ></el-button>
+          </el-col>
+        </el-row>
+        <el-link type="primary" :underline="false" @click="addQuerys">
+          <i class="el-icon-plus"></i>
+          添加查询条件
+        </el-link>
+      </el-form-item>
+
+      <el-form-item label="是否默认">
+        <el-switch v-model="form.isDefault" size="mini"></el-switch>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleCancle">取 消</el-button>
+      <el-button size="mini" type="primary" @click="save">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+  export default {
+    name: 'HtAddQueryStrategy',
+
+    props: {
+      fieldOptions: Array,
+      dialogVisible: {
+        type: Boolean,
+        default: false,
+      },
+      tableCode: String,
+    },
+
+    data() {
+      return {
+        form: {
+          querys: [{}],
+          tableCode: this.tableCode,
+        },
+        queryOPs: [
+          {
+            label: '等于',
+            value: 'EQ',
+          },
+          {
+            label: '等于忽略大小写',
+            value: 'EIC',
+          },
+          {
+            label: '小于',
+            value: 'LT',
+          },
+          {
+            label: '大于',
+            value: 'GT',
+          },
+          {
+            label: '小于等于',
+            value: 'LE',
+          },
+          {
+            label: '大于等于',
+            value: 'GE',
+          },
+          {
+            label: '不等于',
+            value: 'NE',
+          },
+          {
+            label: '相似',
+            value: 'LK',
+          },
+          {
+            label: '左相似',
+            value: 'LFK',
+          },
+          {
+            label: '右相似',
+            value: 'RHK',
+          },
+          {
+            label: '为空',
+            value: 'ISNULL',
+          },
+          {
+            label: '非空',
+            value: 'NOTNULL',
+          },
+          {
+            label: '在...之间',
+            value: 'BETWEEN',
+          },
+          {
+            label: '在...中',
+            value: 'IN',
+          },
+        ],
+      }
+    },
+
+    methods: {
+      onSubmit: function() {},
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(() => {
+            done()
+            this.$emit('queryStrategyCancle')
+          })
+          .catch(() => {})
+      },
+      handleCancle() {
+        this.$emit('queryStrategyCancle')
+      },
+      save() {
+        this.$validator.validateAll().then((validate) => {
+          if (validate) {
+            this.$emit('queryStrategySave', this.form)
+          } else {
+            this.$message.error('表单验证失败，请检查')
+          }
+        })
+      },
+      addQuerys() {
+        this.form.querys.push({})
+      },
+      removeQuerys(item) {
+        this.form.querys.remove(item)
+      },
+      changeField(item) {
+        if (item.field.options && item.field.options.length > 0) {
+          item.operation = 'EQ'
+        }
+        item.property = item.field.value
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] ::v-deep .el-input__inner,
+  div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
+    border-color: #f56c6c;
+  }
+  .el-row {
+    margin-bottom: 10px;
+  }
+  .el-col {
+    padding-left: 10px;
+  }
+</style>

package/packages/Autocomplete/index.js

@@ -0,0 +1,7 @@
+import Autocomplete from './src/main.vue'
+
+Autocomplete.install = function(Vue) {
+  Vue.component(Autocomplete.name, Autocomplete)
+}
+
+export default Autocomplete

package/packages/Autocomplete/src/main.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-autocomplete
+      v-if="inputWriteable && permission_sub != 'n'"
+      ref="refName"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :name="inputName"
+      :style="styles"
+      :fetch-suggestions="querySearchAsync"
+      :placeholder="placeholder"
+      :placement="placement"
+      :popper-class="popperClass"
+      :trigger-on-focus="triggerOnFocus"
+      :select-when-unmatched="selectWhenUnmatched"
+      :hide-loading="hideLoading"
+      :clearable="clearable"
+      :popper-append-to-body="popperAppendToBody"
+      :highlight-first-item="highlightFirstItem"
+      @select="(opt) => $emit('select', opt)"
+      @change="(value) => $emit('change', value)"
+    >
+      <slot slot="prefix" name="prefix"></slot>
+      <slot slot="suffix" name="suffix"></slot>
+      <slot slot="prepend" name="prepend"></slot>
+      <slot slot="append" name="append"></slot>
+      <slot slot-scope="{ item }" :item="item"></slot>
+    </el-autocomplete>
+    <ht-field-tail
+      v-if="permission != 'n'"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputReadonlyVal"
+    ></ht-field-tail>
+  </div>
+</template>
+
+<script>
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import linkage from '@/mixins/linkage.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtAutocomplete',
+    mixins: [permission, inputName, linkage, ganged, form],
+    props: {
+      value: String,
+      autoTiplist: String,
+      styles: Object,
+      placement: {
+        type: String,
+        validator(val) {
+          return [
+            'top',
+            'top-start',
+            'top-end',
+            'bottom',
+            'bottom-start',
+            'bottom-end',
+            'bottom-start',
+          ].includes(val)
+        },
+      },
+      popperClass: String,
+      triggerOnFocus: {
+        type: Boolean,
+        default: true,
+      },
+      selectWhenUnmatched: {
+        type: Boolean,
+        default: false,
+      },
+      hideLoading: {
+        type: Boolean,
+        default: false,
+      },
+      popperAppendToBody: {
+        type: Boolean,
+        default: true,
+      },
+      highlightFirstItem: {
+        type: Boolean,
+        default: false,
+      },
+      props: {
+        type: Object,
+        default: function() {
+          return {
+            key: 'value',
+          }
+        },
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    data() {
+      return {
+        refName: `autocomplete-${utils.getName()}`,
+        options: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          return this.value
+        },
+        set: function(val) {
+          if (typeof val == 'number') {
+            this.$emit('input', val.toString())
+          } else {
+            this.$emit('input', val)
+          }
+        },
+      },
+      inputReadonlyVal: function() {
+        if (
+          !this.inputWriteable &&
+          this.inputVal.length > 0 &&
+          this.options.length > 0
+        ) {
+          var inputValArr = []
+          if (this.inputVal && this.options.length > 0) {
+            for (var a = 0; a < this.options.length; a++) {
+              if (this.options[a][this.props.key] == this.inputVal) {
+                inputValArr.push(this.options[a].value)
+                break
+              }
+            }
+          }
+          return inputValArr.join(',')
+        }
+        return this.inputVal
+      },
+    },
+    created() {
+      this.options = this.autoTiplist ? JSON.parse(this.autoTiplist) : []
+    },
+    methods: {
+      querySearchAsync(queryString, cb) {
+        this.doCustomQuery(null, true)
+          .then((data) => {
+            if (data != null || data != undefined) {
+              this.options = data
+            }
+            var results = [].concat(
+              queryString
+                ? this.options.filter(this.createStateFilter(queryString))
+                : this.options
+            )
+            cb(results)
+          })
+          .catch(() => cb(this.options))
+      },
+      createStateFilter(queryString) {
+        return (state) => {
+          let _val = state.value
+          if (typeof _val == 'number') {
+            _val = _val.toString()
+          }
+          return _val.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
+        }
+      },
+      focus() {
+        this.$refs[this.refName].focus()
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+
+  .inputs {
+    ::v-deep {
+      .el-autocomplete {
+        width: 100%;
+      }
+    }
+  }
+</style>

package/packages/Avatar/index.js

@@ -0,0 +1,7 @@
+import AvatarImage from './src/AvatarImage.vue'
+
+AvatarImage.install = function(Vue) {
+  Vue.component(AvatarImage.name, AvatarImage)
+}
+
+export default AvatarImage