@smallwei/avue 3.8.1 → 3.8.3

package/lib/packages/element-plus/input-map/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div :class="b()">
+    <el-input
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
+      :size="size"
+      @clear="handleClear"
+      :clearable="clearableVal"
+      :rows="rows"
+      :autosize="{ minRows: minRows, maxRows: maxRows }"
+      :disabled="disabled"
+      ref="main"
+      :model-value="address"
+      @focus="handleShow"
+      @click.="handleClick"
+      :placeholder="placeholder"
+    >
+    </el-input>
+    <div v-if="box">
+      <el-dialog
+        class="avue-dialog"
+        :width="dialogWidth"
+        :before-close="beforeClose"
+        :append-to-body="$AVUE.appendToBody"
+        lock-scroll
+        :title="placeholder"
+        @close="handleClose"
+        v-model="box"
+      >
+        <div :class="b('content')" v-if="box">
+          <el-input
+            :class="b('content-input')"
+            id="map__input"
+            :size="size"
+            @clear="clear"
+            :readonly="disabled"
+            v-model="formattedAddress"
+            clearable
+            :placeholder="t('map.searchPlaceholder')"
+          ></el-input>
+          <div :class="b('content-box')">
+            <div
+              id="map__container"
+              :class="b('content-container')"
+              tabindex="0"
+            ></div>
+            <div id="map__result" :class="b('content-result')"></div>
+          </div>
+        </div>
+        <span class="avue-dialog__footer">
+          <el-button
+            type="primary"
+            :size="size"
+            icon="el-icon-check"
+            v-if="!(disabled || readonly)"
+            @click="handleSubmit"
+            >{{ t("common.submitBtn") }}</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import packages from "../../../core/packages.js";
+import create from "../../../core/create.js";
+import props from "../../core/common/props.js";
+import event from "../../core/common/event.js";
+import locale from "../../../core/locale.js";
+export default create({
+  name: "input-map",
+  mixins: [props(), event(), locale],
+  props: {
+    beforeClose: Function,
+    mapChange: Function,
+    prefixIcon: {
+      type: String,
+    },
+    suffixIcon: {
+      type: String,
+    },
+    dialogWidth: {
+      type: String,
+      default: "80%",
+    },
+    rows: Number,
+    minRows: {
+      type: Number,
+      default: 1,
+    },
+    maxRows: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      formattedAddress: "",
+      address: "",
+      poi: {},  
+      marker: null,
+      map: null,
+      box: false,
+    };
+  },
+  watch: {
+    poi(val) {
+      this.formattedAddress = val.formattedAddress;
+    },
+    modelValue(val) {
+      if (this.validatenull(val)) {
+        this.poi = {};
+        this.address = "";
+      }
+    },
+    text(val) {
+      if (!this.validatenull(val)) {
+        this.poi = {
+          longitude: val[0],
+          latitude: val[1],
+          formattedAddress: val[2],
+        };
+        this.address = val[2];
+      }
+    },
+    box: {
+      handler() {
+        if (this.box) {
+          this.$nextTick(() =>
+            this.init(() => {
+              if (this.longitude && this.latitude) {
+                this.addMarker(this.longitude, this.latitude);
+                this.getAddress(this.longitude, this.latitude);
+              }
+            })
+          );
+        }
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    longitude() {
+      return this.text[0];
+    },
+    latitude() {
+      return this.text[1];
+    },
+    title() {
+      return this.disabled || this.readonly ? this.t('common.view') : this.t('common.select');
+    },
+  },
+  methods: {
+    handleTextValue(val) {
+      if (!this.validatenull(val)) {
+        this.poi = {
+          longitude: val[0],
+          latitude: val[1],
+          formattedAddress: val[2],
+        };
+        this.address = val[2];
+      }
+    },
+    handleModelValue(val) {
+      if (this.validatenull(val)) this.poi = {};
+    },
+    clear() {
+      this.poi = {};
+      this.clearMarker();
+    },
+    handleSubmit() {
+      this.setVal();
+      this.box = false;
+    },
+    handleClear() {
+      this.text = [];
+      this.poi = {};
+      this.handleChange(this.text);
+      setTimeout(() => {
+        this.box = false;
+      }, 0);
+    },
+    setVal() {
+      this.text = [
+        this.poi.longitude,
+        this.poi.latitude,
+        this.poi.formattedAddress,
+      ];
+      this.handleChange(this.text);
+    },
+    handleShow() {
+      this.$refs.main.blur();
+      this.box = true;
+    },
+    //新增坐标
+    addMarker(R, P) {
+      this.clearMarker();
+      this.marker = new window.AMap.Marker({
+        position: [R, P],
+      });
+      this.marker.setMap(this.map);
+    },
+    //清空坐标
+    clearMarker() {
+      if (this.marker) {
+        this.marker.setMap(null);
+        this.marker = null;
+      }
+    },
+    //获取坐标
+    getAddress(R, P) {
+      //回调函数
+      let geocoder = new window.AMap.Geocoder({});
+      geocoder.getAddress([R, P], (status, result) => {
+        if (status === "complete" && result.info === "OK") {
+          this.mapChange && this.mapChange(result);
+          const regeocode = result.regeocode;
+          this.poi = Object.assign(regeocode, {
+            longitude: R,
+            latitude: P,
+          });
+          // 自定义点标记内容
+          var markerContent = document.createElement("div");
+          // 点标记中的图标
+          var markerImg = document.createElement("img");
+          markerImg.style.width = "25px";
+          markerImg.src =
+            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
+          markerContent.appendChild(markerImg);
+
+          // 点标记中的文本
+          var markerSpan = document.createElement("span");
+          markerSpan.className = "avue-input-map__marker";
+          markerSpan.innerHTML = this.poi.formattedAddress;
+          markerContent.appendChild(markerSpan);
+          this.marker.setContent(markerContent); //更新点标记内容
+        }
+      });
+    },
+    handleClose() {
+      window.poiPicker.clearSearchResults();
+    },
+    addClick() {
+      this.map.on("click", (e) => {
+        if (this.disabled || this.readonly) return;
+        const lnglat = e.lnglat;
+        const P = lnglat.lat;
+        const R = lnglat.lng;
+        this.addMarker(R, P);
+        this.getAddress(R, P);
+      });
+    },
+    init(callback) {
+      if (!window.AMap) {
+        packages.logs("Map");
+        return;
+      }
+      this.map = new window.AMap.Map(
+        "map__container",
+        Object.assign(
+          {
+            zoom: 13,
+            center: (() => {
+              if (this.longitude && this.latitude)
+                return [this.longitude, this.latitude];
+            })(),
+          },
+          this.params
+        )
+      );
+      this.initPoip();
+      this.addClick();
+      callback();
+    },
+    initPoip() {
+      if (!window.AMapUI) {
+        packages.logs("MapUi");
+        return;
+      }
+      window.AMapUI.loadUI(["misc/PoiPicker"], (PoiPicker) => {
+        var poiPicker = new PoiPicker({
+          input: "map__input",
+          placeSearchOptions: {
+            map: this.map,
+            pageSize: 10,
+          },
+          searchResultsContainer: "map__result",
+        });
+        //初始化poiPicker
+        this.poiPickerReady(poiPicker);
+      });
+    },
+    poiPickerReady(poiPicker) {
+      window.poiPicker = poiPicker;
+      //选取了某个POI
+      poiPicker.on("poiPicked", (poiResult) => {
+        this.clearMarker();
+        var source = poiResult.source,
+          poi = poiResult.item;
+        this.poi = Object.assign(poi, {
+          formattedAddress: poi.name,
+          longitude: poi.location.lng,
+          latitude: poi.location.lat,
+        });
+        if (source !== "search") {
+          poiPicker.searchByKeyword(poi.name);
+        }
+      });
+    },
+  },
+});
+</script>

package/lib/packages/element-plus/input-number/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-input-number
+    v-model="text"
+    :class="b()"
+    @click="handleClick"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    :precision="precision"
+    :placeholder="placeholder"
+    :step-strictly="stepStrictly"
+    :size="size"
+    :min="min"
+    :align="align"
+    :max="max"
+    :step="step"
+    :clearable="clearableVal"
+    :readonly="readonly"
+    :controls-position="controlsPosition"
+    :controls="controls"
+    :disabled-scientific="disabledScientific"
+    :disabled="disabled"
+  >
+    <template #prefix v-if="prefix">
+      <span @click="prefixClick(text)">{{ prefix }}</span>
+    </template>
+    <template #suffix v-if="suffix">
+      <span @click="suffixClick(text)">{{ suffix }}</span>
+    </template>
+  </el-input-number>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+import props from "../../core/common/props.js";
+import event from "../../core/common/event.js";
+export default create({
+  name: "input-number",
+  mixins: [props(), event()],
+  data() {
+    return {};
+  },
+  props: {
+    align: String,
+    disabledScientific: Boolean,
+    stepStrictly: {
+      type: Boolean,
+      default: false,
+    },
+    controls: {
+      type: Boolean,
+      default: true,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+    controlsPosition: {
+      type: String,
+      default: "right",
+    },
+    precision: {
+      type: Number,
+    },
+    min: {
+      type: Number,
+      default: -Infinity,
+    },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+    prefix: {
+      type: String,
+    },
+    prefixClick: {
+      type: Function,
+      default: () => {},
+    },
+    suffix: {
+      type: String,
+    },
+    suffixClick: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+});
+</script>

package/lib/packages/element-plus/input-table/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <div :class="b()">
+    <el-input
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
+      :size="size"
+      :model-value="labelShow"
+      :clearable="disabled ? false : clearable"
+      :placeholder="placeholder"
+      ref="main"
+      @clear="handleClear"
+      @focus="handleShow"
+      @click="handleClick"
+      :disabled="disabled"
+    >
+    </el-input>
+    <el-dialog
+      class="avue-dialog"
+      :class="b()"
+      :width="dialogWidth"
+      :before-close="handelBeforeClose"
+      :append-to-body="$AVUE.appendToBody"
+      lock-scroll
+      destroy-on-close
+      :title="placeholder"
+      v-model="box"
+    >
+      <avue-crud
+        :class="b('crud')"
+        ref="crud"
+        :option="option"
+        :data="data"
+        :table-loading="loading"
+        @on-load="onList"
+        @search-change="handleSearchChange"
+        @search-reset="handleSearchChange"
+        @select-all="handleSelectionAllChange"
+        @select="handleSelectionChange"
+        :rowClassName="handleRowClassName"
+        @current-row-change="handleCurrentChange"
+        v-model:search="search"
+        v-model:page="page"
+      ></avue-crud>
+      <span class="avue-dialog__footer">
+        <el-button
+          type="primary"
+          :size="size"
+          icon="el-icon-check"
+          @click="handleSubmit()"
+          >{{ t("common.submitBtn") }}</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+import props from "../../core/common/props.js";
+import event from "../../core/common/event.js";
+import locale from "../../../core/locale.js";
+export default create({
+  name: "input-table",
+  mixins: [props(), event(), locale],
+  data() {
+    return {
+      object: [],
+      active: [],
+      search: {},
+      page: {},
+      loading: false,
+      box: false,
+      created: false,
+      data: [],
+    };
+  },
+  props: {
+    beforeClose: Function,
+    prefixIcon: {
+      type: String,
+    },
+    suffixIcon: {
+      type: String,
+    },
+    formatter: Function,
+    onLoad: Function,
+    children: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    dialogWidth: {
+      type: String,
+      default: "80%",
+    },
+  },
+  computed: {
+    isMultiple() {
+      return this.multiple;
+    },
+    title() {
+      return this.disabled || this.readonly ? this.t('common.view') : this.t('common.select');
+    },
+    labelShow() {
+      if (typeof this.formatter == "function") {
+        return this.formatter(
+          this.isMultiple ? this.object : this.object[0] || {}
+        );
+      }
+      return this.object.map((ele) => ele[this.labelKey]).join(",");
+    },
+    option() {
+      return Object.assign(
+        {
+          menu: false,
+          header: false,
+          size: this.size,
+          tip: false,
+          headerAlign: "center",
+          align: "center",
+          highlightCurrentRow: !this.isMultiple,
+          reserveSelection: this.isMultiple,
+          selection: this.isMultiple,
+          selectable: (row, index) => {
+            return !row.disabled;
+          },
+        },
+        this.children
+      );
+    },
+  },
+  methods: {
+    handelBeforeClose(done) {
+      const callback = () => {
+        this.active = [];
+        done();
+      };
+      if (typeof this.beforeClose === "function") {
+        this.beforeClose(callback);
+      } else {
+        callback();
+      }
+    },
+    handleSelectionAllChange(val) {
+      let ids = this.data.map((ele) => ele[this.valueKey]);
+      let list = val.filter((ele) => ids.includes(ele[this.valueKey]));
+      this.data.forEach((row) => {
+        let index = this.active.findIndex(
+          (ele) => ele[this.valueKey] == row[this.valueKey]
+        );
+        if (list.length == 0) {
+          if (index != -1) this.active.splice(index, 1);
+        } else {
+          if (index == -1) this.active.push(row);
+        }
+      });
+    },
+    handleSelectionChange(val, row) {
+      let checkbox = val.find(
+        (ele) => ele[this.valueKey] == row[this.valueKey]
+      );
+      if (checkbox) {
+        this.active.push(row);
+      } else {
+        let index = this.active.findIndex(
+          (ele) => ele[this.valueKey] == row[this.valueKey]
+        );
+        if (index != -1) this.active.splice(index, 1);
+      }
+    },
+    handleModelValue(val) {
+      if (this.validatenull(val)) {
+        this.active = [];
+        this.object = [];
+      }
+    },
+    handleTextValue(val) {
+      if (typeof this.onLoad == "function") {
+        this.onLoad({ value: this.text }, (data) => {
+          let result = Array.isArray(data) ? data : [data];
+          const valArray = Array.isArray(val) ? val : [val];
+          const activeObjArray = valArray && valArray.length
+              ? result.filter((item) =>valArray.some((val) => val === item[this.valueKey]))
+              : [];
+          this.active = this.deepClone(activeObjArray)
+
+          const activeObjArray2 = valArray && valArray.length
+              ? valArray.map((item) =>{
+                const resultIndex = result.findIndex((val) => item === val[this.valueKey])
+                return resultIndex < 0 ? {[this.labelKey]: item, [this.valueKey]: item} : result[resultIndex]
+              })
+              : [];
+          this.object = this.deepClone(activeObjArray2)
+        });
+      }
+    },
+    handleClear() {
+      this.setVal([]);
+      this.box = false;
+    },
+    handleShow() {
+      this.$refs.main.blur();
+      if (this.disabled || this.readonly) return;
+      this.search = {};
+      this.page = {
+        currentPage: 1,
+        total: 0,
+      };
+      this.data = [];
+      this.box = true;
+    },
+    handleSubmit() {
+      const callback = () => {
+        this.setVal();
+      };
+      if (typeof this.beforeClose === "function") {
+        this.beforeClose(callback);
+      } else {
+        callback();
+      }
+    },
+    setVal(value) {
+      this.object = this.deepClone(value || this.active);
+      this.text = this.object.map((ele) => ele[this.valueKey]);
+      this.box = false;
+    },
+    handleRowClassName({ row, rowIndex }) {
+      if (row[this.disabledKey]) return "disabled";
+    },
+    handleCurrentChange(val) {
+      if (!val) return;
+      if (this.isMultiple) {
+        this.$refs.crud.setCurrentRow(null);
+      } else {
+        if (val[this.disabledKey]) {
+          this.$refs.crud.setCurrentRow(this.active[0]);
+        } else {
+          this.active = [val];
+        }
+      }
+    },
+    handleSearchChange(form, done) {
+      this.loading = true;
+      this.page.currentPage = 1;
+      this.onList({}, () => {
+        done && done();
+      });
+    },
+    onList(params, callback) {
+      this.loading = true;
+      if (typeof this.onLoad == "function") {
+        this.onLoad({ page: this.page, data: this.search }, (data) => {
+          callback && callback();
+          this.page.total = data.total;
+          this.data = data.data;
+          this.loading = false;
+          if (this.isMultiple) {
+            let ids = this.object.map((ele) => ele[this.valueKey]);
+            let data = this.data.filter((ele) =>
+              ids.includes(ele[this.valueKey])
+            );
+            this.$nextTick(() => {
+              this.$refs.crud.toggleSelection(data, true);
+            });
+          } else {
+            let active = this.data.find(
+              (ele) => ele[this.valueKey] == this.text
+            );
+            setTimeout(() => {
+              this.$refs.crud.setCurrentRow(active);
+            });
+          }
+        });
+      }
+    },
+  },
+});
+</script>