xianniu-ui 0.1.3 → 0.1.4

package/package.json

@@ -1,62 +1,63 @@
-{
-  "name": "xianniu-ui",
-  "version": "0.1.3",
-  "private": false,
-  "main": "lib/xianniu-ui.umd.min.js",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development vue-cli-service serve",
-    "build": "cross-env NODE_ENV=production vue-cli-service build",
-    "build:lib": "npm run style && vue-cli-service build --target lib --name xianniu-ui --dest lib src/index.js && cp-cli packages/style/lib lib/style",
-    "style": "gulp --gulpfile ./packages/style/gulpfile.js",
-    "play": "cross-env NODE_ENV=development PLAY_ENV=true vue-cli-service serve",
-    "deploy": "bash deploy.sh",
-    "lint": "vue-cli-service lint"
-  },
-  "license": "MIT",
-  "files": [
-    "lib",
-    "src",
-    "packages",
-    "plugins",
-    "public"
-  ],
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "dayjs": "^1.10.7",
-    "element-ui": "^2.15.6",
-    "good-storage": "^1.1.1",
-    "lodash": "^4.17.21",
-    "vue": "^2.6.11",
-    "vue-lottie": "^0.2.1",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.6.2"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.16.7",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/component-compiler-utils": "^2.6.0",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "babel-plugin-module-resolver": "^2.7.1",
-    "copy-webpack-plugin": "^5.1.2",
-    "cp-cli": "^2.0.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "highlight.js": "^9.3.0",
-    "html-loader": "^3.0.1",
-    "markdown-it": "^8.4.2",
-    "markdown-it-anchor": "^5.3.0",
-    "markdown-it-chain": "^1.3.0",
-    "markdown-it-container": "^2.0.0",
-    "markdown-loader": "^6.0.0",
-    "mini-css-extract-plugin": "^0.4.1",
-    "sass": "^1.32.6",
-    "sass-loader": "^8.0.2",
-    "transliteration": "^1.1.11",
-    "vue-template-compiler": "^2.6.11"
-  }
-}
+{
+  "name": "xianniu-ui",
+  "version": "0.1.4",
+  "private": false,
+  "main": "lib/xianniu-ui.umd.min.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development vue-cli-service serve",
+    "build": "cross-env NODE_ENV=production vue-cli-service build",
+    "build:lib": "npm run style && vue-cli-service build --target lib --name xianniu-ui --dest lib src/index.js && cp-cli packages/style/lib lib/style && cp-cli packages/style/src/theme lib/style/theme",
+    "style": "gulp --gulpfile ./packages/style/gulpfile.js",
+    "play": "cross-env NODE_ENV=development PLAY_ENV=true vue-cli-service serve",
+    "deploy": "bash deploy.sh",
+    "lint": "vue-cli-service lint"
+  },
+  "license": "MIT",
+  "files": [
+    "lib",
+    "src",
+    "packages",
+    "plugins",
+    "public"
+  ],
+  "dependencies": {
+    "axios": "^0.26.0",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.10.7",
+    "element-ui": "^2.15.10",
+    "good-storage": "^1.1.1",
+    "image-conversion": "^2.1.1",
+    "vue": "^2.6.11",
+    "vue-lottie": "^0.2.1",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.7",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/component-compiler-utils": "^2.6.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-module-resolver": "^2.7.1",
+    "copy-webpack-plugin": "^5.1.2",
+    "cp-cli": "^2.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "highlight.js": "^9.3.0",
+    "html-loader": "^3.0.1",
+    "markdown-it": "^8.4.2",
+    "markdown-it-anchor": "^5.3.0",
+    "markdown-it-chain": "^1.3.0",
+    "markdown-it-container": "^2.0.0",
+    "markdown-loader": "^6.0.0",
+    "mini-css-extract-plugin": "^0.4.1",
+    "sass": "^1.32.6",
+    "sass-loader": "^8.0.2",
+    "transliteration": "^1.1.11",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

package/packages/city/index.js

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

package/packages/city/main.vue

@@ -0,0 +1,258 @@
+<template>
+  <!-- 城市联动 -->
+  <div class="xn-city">
+    <span v-if="showType === 'text'">{{ cityLabel }}</span>
+    <el-cascader
+      v-else-if="showType === 'form'"
+      ref="xnCity"
+      v-model="cityValue"
+      placeholder="请选择城市"
+      filterable
+      style="width: 100%"
+      :options="cityList"
+      :props="cityProps"
+      :disabled="disabled"
+      clearable
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import citys from 'xn-ui/src/area/index.js'
+// import tools from '../../../utils/index'
+export default {
+  name: 'XnCity',
+  model: {
+    prop: 'value',
+    event: 'on-change'
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 传入对应的城市code
+     * 区级 ->  省|市|区
+     * 市级 ->  省|市
+     * 省级 ->  省
+     */
+    value: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    valueKey: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 显示级别
+     * 3  ->  省|市|区
+     * 2  ->  省|市
+     */
+    showLevel: {
+      type: Number,
+      default: 3
+    },
+    /**
+     * 组件类型
+     * 静态显示 -> text
+     * 表单类型 -> form
+     */
+    showType: {
+      type: String,
+      default: 'form'
+    },
+    dataLevel: {
+      type: Number,
+      default: 3
+    },
+    keyOptions: {
+      type: Object,
+      default: () => {
+        return {
+          codeKey: 'code',
+          labelKey: 'label'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      // "430000", "430200", "430203"
+      val: [],
+      cityList: [],
+      cityProps: {
+        label: 'cityName',
+        value: 'cityCode',
+        children: 'subCitys'
+      },
+      flattenResult: []
+    }
+  },
+  computed: {
+    // 根据code 获取对应的父级省市区label
+    cityLabel() {
+      const { value, showLevel, showType, valueKey } = this
+      let res = '--'
+      let _value = ''
+      valueKey ? _value = value[valueKey] : _value
+      if (showType === 'text' && value !== '') {
+        // if (!value) throw new Error("静态模式下请传入cityCode！");
+        const level = showLevel > 3 ? 3 : showLevel
+        res = this.findParent(_value, this.flattenResult)
+          .slice(0, level)
+          .map((item) => item.cityName)
+          .join(` | `)
+      }
+      return res
+    },
+    cityValue: {
+      set: function(n) {
+        this.val = n
+      },
+      get: function() {
+        const { value, valueKey } = this
+        const _value = valueKey ? value[valueKey] : value
+        const res = this.findParent(
+          _value,
+          this.flattenResult
+        )
+          .map((item) => item.cityCode)
+
+        return res
+      }
+    }
+  },
+  created() {
+    this.fnGetCitys()
+  },
+  methods: {
+    // 为所有数据添加父级pid
+    addParentKey(tree) {
+      const data = JSON.parse(JSON.stringify(tree)) // deepClone
+      function addParentKey(data, parentKey) {
+        data.forEach((item) => {
+          const { subCitys, cityCode } = item
+          item.parent = parentKey
+          if (subCitys) {
+            addParentKey(subCitys, cityCode)
+          }
+        })
+      }
+      addParentKey(data, null) // 一开始的时候是null
+      return data
+    },
+    /**
+     * @param {array} data 城市联动数据（带pid）
+     */
+    flattenTreeData(data) {
+      const treeData = JSON.parse(JSON.stringify(data))
+      const flattenData = []
+      function flattenTree(data, parentKey) {
+        data.forEach((item) => {
+          const { cityName, cityCode, subCitys } = item
+          flattenData.push({ cityName, cityCode, parentKey })
+          if (subCitys) {
+            flattenTree(subCitys, cityCode)
+          }
+        })
+      }
+      flattenTree(treeData, null)
+      return flattenData
+    },
+    /**
+     * @param {string,number} cityCode 区县对应的code
+     * @param {array} flattenTree 扁平化后的城市数据
+     */
+    findParent(cityCode, flattenTree) {
+      const parentArr = []
+      function find(cityCode, flattenTree) {
+        flattenTree.forEach((item) => {
+          // eslint-disable-next-line eqeqeq
+          if (item.cityCode == cityCode) {
+            parentArr.unshift(item)
+            find(item.parentKey, flattenTree)
+          }
+        })
+      }
+      find(cityCode, flattenTree)
+      return parentArr
+    },
+    // 接口获取城市联动数据
+    fnGetCitys() {
+      const _citys = this.$utils.deepClone(citys)
+      this.cityList = this.toTreeDataLevel(_citys)
+      this.flattenResult = this.flattenTreeData(
+        this.addParentKey(this.cityList)
+      )
+    },
+    // 给数据加上level并且去除最后一层空数据
+    toTreeDataLevel(data) {
+      if (!Array.isArray(data)) return []
+      const recursive = (data, level = 0) => {
+        level++
+        return data.map((item) => {
+          item.level = level
+          const child = item.subCitys
+          if (level >= 2 && this.dataLevel === 2) {
+            delete item.subCitys
+          }
+          if (child && child.length) {
+            recursive(child, level)
+          } else {
+            delete item.subCitys
+          }
+          return item
+        })
+      }
+      return recursive(data)
+    },
+    // 获取选中
+    handleChange(cityCode) {
+      // 返回数组形式 code和label
+      const cityName = this.handleTreeLabel(cityCode, this.cityList)
+      const city = this.handleTreeLabel(cityCode, this.cityList, 2)
+      const cityCodeLast = cityCode[cityCode.length - 1]
+      const cityNameLast = cityName[cityName.length - 1]
+      let value = ''
+      if (this.valueKey) {
+        value = city[city.length - 1]
+      } else {
+        value = cityCodeLast
+      }
+      this.$emit('on-change', value)
+      this.$emit('on-city', {
+        city,
+        cityCode,
+        cityName,
+        cityCodeLast,
+        cityNameLast
+      })
+    },
+    /**
+     * 根据城市code 获取对应的城市
+     * @param {Array} val 选中的城市code
+     * @param {Array} data 城市联动数据
+     */
+    handleTreeLabel(val, data = [], type = 1) {
+      return val.map((item) => {
+        for (var itm of data) {
+          // eslint-disable-next-line eqeqeq
+          if (itm.cityCode == item) {
+            data = itm.subCitys
+            return type === 1
+              ? itm.cityName
+              : {
+                [this.keyOptions.codeKey]: itm.cityCode,
+                [this.keyOptions.labelKey]: itm.cityName
+              }
+          }
+        }
+        return null
+      })
+    }
+  }
+}
+</script>

package/packages/date/index.js

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