bl-common-vue3 0.2.52 → 0.2.54

package/.history/package_20230314202309.json

@@ -0,0 +1,54 @@
+{
+  "name": "bl-common-vue3",
+  "version": "0.2.53",
+  "main": "lib/vue3common.umd.min.js",
+  "description": "bailing vue3 common components lib",
+  "private": false,
+  "scripts": {
+    "lib": "vue-cli-service build --target lib --name vue3common --dest lib index.js",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.0.1",
+    "ant-design-vue": "^2.2.8",
+    "axios": "^0.21.4",
+    "core-js": "^3.6.5",
+    "less": "^4.1.1",
+    "less-loader": "^6.0.0",
+    "moment": "^2.29.1",
+    "qrcode.vue": "^3.3.3",
+    "style-resources-loader": "^1.5.0",
+    "vue": "^3.0.4"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/.history/package_20230321175012.json

@@ -0,0 +1,54 @@
+{
+  "name": "bl-common-vue3",
+  "version": "0.2.54",
+  "main": "lib/vue3common.umd.min.js",
+  "description": "bailing vue3 common components lib",
+  "private": false,
+  "scripts": {
+    "lib": "vue-cli-service build --target lib --name vue3common --dest lib index.js",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.0.1",
+    "ant-design-vue": "^2.2.8",
+    "axios": "^0.21.4",
+    "core-js": "^3.6.5",
+    "less": "^4.1.1",
+    "less-loader": "^6.0.0",
+    "moment": "^2.29.1",
+    "qrcode.vue": "^3.3.3",
+    "style-resources-loader": "^1.5.0",
+    "vue": "^3.0.4"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/.history/src/components/CheckedHousingResources/index_20230222150349.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="checked-house">
+    <a-row :gutter="12">
+      <a-col :span="inputShow ? 8 : 16"> 房源名称</a-col>
+      <a-col :span="8" v-if="inputShow"> 租赁面积(㎡)</a-col>
+      <a-col :span="8">
+        {{ maxTotal ? "总面积(㎡)" : "可租/总面积(㎡)" }}
+      </a-col>
+    </a-row>
+    <a-divider style="margin: 10px 0" />
+    <a-row v-if="checkable">
+      <template v-for="(item, index) of allHouseList" :key="item.id">
+        <a-col
+          :span="16"
+          style="cursor: pointer"
+          @click="handleHouseChecked(item, index)"
+        >
+          <div class="room-name">
+            <a-checkbox
+              :checked="item.checked"
+              style="margin-right: 10px"
+              size="large"
+            ></a-checkbox>
+            <!-- 楼层 -->
+            <span v-if="item.layer_name || item.extra.layer_name">
+              {{ item.layer_name || item.extra.layer_name }}
+            </span>
+            <span v-if="item.room_name">/{{ item.room_name }}</span>
+          </div>
+          <div
+            class="building-name"
+            style="padding-left: 26px"
+            v-if="
+              item.build_name || (item.extra ? item.extra.build_name : false)
+            "
+          >
+            {{ item.build_name || item.extra.build_name }}
+          </div>
+        </a-col>
+        <a-col :span="8" style="padding-left: 10px">
+          <span v-if="maxTotal">{{ getTotalArea(item) }}</span>
+          <span v-else> {{ getMaxArea(item) }} / {{ getTotalArea(item) }}</span>
+        </a-col>
+      </template>
+    </a-row>
+    <a-row :gutter="[12, 12]" align="middle" v-else>
+      <template v-if="houseShowList && houseShowList.length">
+        <template v-for="item of houseShowList" :key="item.id">
+          <a-col :span="inputShow ? 8 : 16">
+            <div class="room-name">
+              <!-- 楼层 -->
+              <span v-if="item.layer_name || item.extra.layer_name">
+                {{ item.layer_name || item.extra.layer_name }}
+              </span>
+              <span v-if="item.room_name">/{{ item.room_name }}</span>
+            </div>
+            <div
+              class="building-name"
+              v-if="
+                item.build_name || (item.extra ? item.extra.build_name : false)
+              "
+            >
+              {{ item.build_name || item.extra.build_name }}
+            </div>
+          </a-col>
+          <a-col :span="8" v-if="inputShow">
+            <a-input-number
+              v-model:value="item.inputArea[clauseType]"
+              placeholder="请输入面积"
+              :min="clauseType == 'property' ? 0 : 1"
+              :max="Number(item.maxArea[clauseType])"
+              @change="(val) => handleAreaInputChange(item, val)"
+            />
+          </a-col>
+          <a-col :span="8">
+            <span v-if="!maxTotal"> {{ item.maxArea[clauseType] }} / </span>
+            <span> {{ item.totalArea[clauseType] }} </span>
+          </a-col>
+        </template>
+      </template>
+      <div v-else style="text-align: center; margin-top: 20px; width: 100%">
+        <a-empty :description="emptyDesc" />
+      </div>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  reactive,
+  toRaw,
+  toRefs,
+  watch,
+} from "vue";
+import { Empty, Row, Col, InputNumber, Divider } from "ant-design-vue";
+
+export default defineComponent({
+  name: "CheckedHousingResources",
+  components: {
+    "a-empty": Empty,
+    "a-row": Row,
+    "a-col": Col,
+    "a-input-number": InputNumber,
+    "a-divider": Divider,
+  },
+  props: {
+    // 是否是可勾选模式
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
+    // 面积是否可填写 （checkable为true时areaInput固定为false）
+    areaInput: {
+      type: Boolean,
+      default: false,
+    },
+    // 选择的房源
+    houseList: {
+      type: Array,
+      default: () => [],
+    },
+    // 全部房源列表  checkable为true时展示的列表
+    allHouseList: {
+      type: Array,
+      default: () => [],
+    },
+    // 勾选选中与否是否由外部控制
+    checkControl: {
+      type: Boolean,
+      default: false,
+    },
+    // 空状态描述文字
+    emptyDesc: {
+      type: String,
+      default: "未选择房源",
+    },
+    // 条款类型 lease租赁条款 property物业条款
+    clauseType: {
+      type: String,
+      default: "lease",
+    },
+    // 可租面积是否包含自己的面积
+    includeSelfArea: {
+      type: Boolean,
+      default: false,
+    },
+    // 最大面积是否是总面积（不受可租面积影响）
+    maxTotal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const state = reactive({
+      houseShowList: [],
+    });
+
+    const inputShow = computed(() => !props.checkable && props.areaInput);
+
+    const setHouseArea = (current, needInputArea = true) => {
+      current.charging_area =
+        current.charging_area || current.property_area || 0;
+      current.rental_area = current.rental_area || current.lease_area || 0;
+      let item = { ...current };
+      if (
+        item.totalArea &&
+        item.totalArea[props.clauseType] &&
+        item.maxArea &&
+        item.maxArea[props.clauseType] != undefined &&
+        (!needInputArea ||
+          (item.inputArea && item.inputArea[props.clauseType] != undefined))
+      ) {
+        return item;
+      }
+      item.totalArea = {
+        property:
+          props.clauseType == "property" && Number(item.charging_area)
+            ? Number(item.charging_area)
+            : Number(item.rental_area),
+        lease: Number(item.rental_area),
+      };
+      item.maxArea = { ...item.totalArea };
+      if (!props.maxTotal) {
+        if (item.rent_area) {
+          item.maxArea = {
+            property:
+              props.clauseType == "property" &&
+              Number(item.rent_area.property_square)
+                ? Number(
+                    Number(item.totalArea.property) -
+                      Number(item.rent_area.property_square)
+                  )
+                : item.totalArea.property,
+            lease: item.rent_area.lease_square
+              ? Number(
+                  Number(item.totalArea.lease) -
+                    Number(item.rent_area.lease_square)
+                )
+              : item.totalArea.lease,
+          };
+        }
+        if (item.rentedArea && props.includeSelfArea) {
+          item.maxArea = {
+            property: item.maxArea.property + Number(item.rentedArea.property),
+            lease: item.maxArea.lease + Number(item.rentedArea.lease),
+          };
+        }
+      }
+      if (
+        needInputArea &&
+        (!item.inputArea || item.inputArea[props.clauseType] == undefined)
+      ) {
+        item.inputArea = { ...item.maxArea };
+        if (!props.maxTotal && item.rentedArea) {
+          item.inputArea = {
+            ...item.rentedArea,
+          };
+        }
+      }
+      return item;
+    };
+
+    const getTotalArea = (item) => {
+      item.charging_area = item.charging_area || item.property_area || 0;
+      item.rental_area = item.rental_area || item.lease_area || 0;
+      if (props.clauseType == "property" && Number(item.charging_area)) {
+        return Number(item.charging_area);
+      } else {
+        return Number(item.rental_area);
+      }
+    };
+
+    const getMaxArea = (item) => {
+      const totalArea = getTotalArea(item);
+      if (props.maxTotal) {
+        return totalArea;
+      }
+      let maxArea = totalArea;
+      if (item.rent_area) {
+        if (props.clauseType == "property" && Number(item.charging_area)) {
+          maxArea = Number(
+            Number(totalArea) - (Number(item.rent_area.property_square) || 0)
+          );
+        } else {
+          maxArea = Number(
+            Number(totalArea) - (Number(item.rent_area.lease_square) || 0)
+          );
+        }
+      }
+      if (
+        props.includeSelfArea &&
+        item.rentedArea &&
+        item.rentedArea[props.clauseType]
+      ) {
+        maxArea = maxArea + Number(item.rentedArea[props.clauseType]);
+      }
+      return maxArea;
+    };
+
+    const emitInputChange = () => {
+      let leaseArea = 0;
+      state.houseShowList.forEach((item) => {
+        leaseArea =
+          Number(leaseArea) + Number(item.inputArea[props.clauseType]);
+      });
+      emit("getResult", {
+        type: "area",
+        houseList: state.houseShowList,
+        leaseArea,
+      });
+    };
+
+    let inputTimeout = null;
+    const handleAreaInputChange = () => {
+      if (inputTimeout) {
+        clearTimeout(inputTimeout);
+        inputTimeout = null;
+      }
+      inputTimeout = setTimeout(() => {
+        emitInputChange();
+      }, 1000);
+    };
+
+    const handleHouseChecked = (current, index) => {
+      if (!props.checkControl) {
+        current.checked = !current.checked;
+      }
+      emit("getResult", {
+        type: "check",
+        current,
+        index,
+        houseList: state.houseShowList,
+      });
+    };
+
+    const setHouseShowList = () => {
+      state.houseShowList = props.houseList.map((item) => {
+        return setHouseArea(item);
+      });
+      nextTick(() => {
+        console.log(
+          "setHouseShowList-----------------------------------",
+          toRaw(state.houseShowList)
+        );
+        emitInputChange();
+      });
+    };
+
+    watch(
+      () => props.houseList,
+      () => {
+        setHouseShowList();
+      },
+      {
+        deep: true,
+      }
+    );
+
+    const init = () => {
+      setHouseShowList();
+    };
+    init();
+
+    return {
+      inputShow,
+      ...toRefs(state),
+      handleAreaInputChange,
+      handleHouseChecked,
+      getTotalArea,
+      getMaxArea,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.checked-house {
+  width: 100%;
+  height: 100%;
+  overflow: hidden auto;
+  .room-name {
+    font-size: 15px;
+    color: rgba(0, 0, 0, 1);
+    font-weight: 500;
+  }
+  .building-name {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+  }
+  .room-area {
+    font-size: 15px;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+</style>