bl-common-vue3 0.2.50 → 0.2.52

package/.history/package_20230314095533.json

@@ -0,0 +1,54 @@
+{
+  "name": "bl-common-vue3",
+  "version": "0.2.51",
+  "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_20230314160155.json

@@ -0,0 +1,54 @@
+{
+  "name": "bl-common-vue3",
+  "version": "0.2.52",
+  "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/SelectProperty/index_20230314160141.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="select-property">
+    <a-modal
+      title="选择资产"
+      :visible="visible"
+      :footer="null"
+      centered
+      @cancel="onClose"
+      :width="1000"
+    >
+      <!-- 筛选项 -->
+      <a-form layout="vertical">
+        <a-row :gutter="[12, 12]">
+          <a-col :span="6">
+            <a-form-item label="资产编码">
+              <a-input
+                v-model:value="searchParams.property_number"
+                style="width: 100%"
+                placeholder="请输入资产编码"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="资产分类">
+              <a-tree-select
+                placeholder="请选择资产分类"
+                v-model:value="searchParams.type"
+                style="width: 100%"
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                :tree-data="propertyTypeList"
+                :replace-fields="replaceFields"
+                tree-checkable
+                allow-clear
+                :maxTagCount="1"
+                :filterTreeNode="filterTreeNodeType"
+                :showCheckedStrategy="SHOW_ALL"
+              >
+              </a-tree-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="资产名称">
+              <a-input
+                placeholder="请输入资产名称"
+                v-model:value="searchParams.name"
+                style="width: 100%"
+                allowClear
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="所在位置">
+              <a-tree-select
+                placeholder="请选择所在位置"
+                v-model:value="searchParams.position_arr"
+                style="width: 100%"
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                :tree-data="positionList"
+                :replace-fields="replaceFieldsPosition"
+                tree-checkable
+                allow-clear
+                :maxTagCount="1"
+                :filterTreeNode="filterTreeNodePosition"
+                :showCheckedStrategy="SHOW_ALL"
+              >
+              </a-tree-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="品牌">
+              <a-input
+                placeholder="请输入品牌"
+                v-model:value="searchParams.brand"
+                style="width: 100%"
+                allowClear
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="型号">
+              <a-input
+                placeholder="请输入型号"
+                v-model:value="searchParams.model_name"
+                style="width: 100%"
+                allowClear
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label=" ">
+              <a-space>
+                <a-button @click="reset">重置</a-button>
+                <a-button type="primary" @click="getDataList(true)">
+                  搜索
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <a-row style="height: 525px">
+        <a-col :span="24">
+          <!-- 表格 -->
+          <a-table
+            :columns="columns"
+            :dataSource="dataList"
+            :pagination="pagination"
+            @change="handleTableChange"
+            :loading="tableLoading"
+            rowKey="id"
+            :row-selection="rowSelection"
+            :scroll="{ y: 350 }"
+          >
+            <template #title>
+              <a-row
+                type="flex"
+                align="middle"
+                justify="space-between"
+                style="padding: 5px 20px"
+              >
+                <a-col>
+                  <span style="font-size: 12px; color: #555555">
+                    共计 {{ total }} 项
+                  </span>
+                  <template v-if="selectedRowKeys.length > 0">
+                    <span
+                      style="font-size: 12px; color: #555555; margin-left: 10px"
+                    >
+                      已选中 {{ selectedRowKeys.length }} 项
+                    </span>
+                  </template>
+                </a-col>
+              </a-row>
+            </template>
+          </a-table>
+        </a-col>
+      </a-row>
+
+      <!-- 底部操作栏 -->
+      <a-row style="margin-top: 24px">
+        <a-col
+          :span="24"
+          style="display: flex; justify-content: flex-end; align-items: center"
+        >
+          <a-button @click="onClose"> 取消 </a-button>
+          <a-button type="primary" @click="onSubmit" style="margin-left: 10px">
+            保存
+          </a-button>
+        </a-col>
+      </a-row>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, reactive, toRefs, watch } from "vue";
+import {
+  Modal,
+  Button,
+  Row,
+  Col,
+  Table,
+  Space,
+  Form,
+  FormItem,
+  Input,
+  TreeSelect,
+} from "ant-design-vue";
+
+const useForm = Form.useForm;
+const SHOW_ALL = TreeSelect.SHOW_ALL;
+
+export default defineComponent({
+  name: "SelectProperty",
+  components: {
+    "a-modal": Modal,
+    "a-row": Row,
+    "a-col": Col,
+    "a-button": Button,
+    "a-table": Table,
+    "a-space": Space,
+    "a-form": Form,
+    "a-form-item": FormItem,
+    "a-input": Input,
+    "a-tree-select": TreeSelect,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    selectedList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    type: {
+      type: String,
+      default: "radio",
+    },
+    resetPage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      dataList: [],
+      page: 1,
+      pageSize: 20,
+      total: 0,
+      tableLoading: false,
+      selectedRowKeys: [],
+      selectedRows: [],
+      propertyTypeList: [], //资产类别下拉列表
+      positionList: [], //所在位置下拉列表
+      dataListTotal: [], //所有资产，不会因翻页丢失
+    });
+
+    const searchParams = reactive({
+      type: undefined, //资产分类
+      name: "", //资产名称
+      property_number: "", //资产编码
+      brand: "", //品牌
+      model_name: "", //型号
+      position_arr: undefined, //当前位置
+    });
+    const { resetFields } = useForm(searchParams, {});
+
+    const pagination = computed(() => ({
+      total: state.total,
+      current: state.page,
+      pageSize: state.pageSize,
+      showSizeChanger: true,
+    }));
+
+    const handleTableChange = (pager, filters, sorter) => {
+      console.log("handleTableChange", filters, sorter);
+      state.page = pager.current;
+      state.pageSize = pager.pageSize;
+      getDataList();
+    };
+
+    const rowSelection = computed(() => ({
+      selectedRowKeys: state.selectedRowKeys,
+      type: props.type,
+      onChange: onSelectChange,
+    }));
+
+    const onSelectChange = (keys, rows) => {
+      state.selectedRowKeys = keys;
+
+      let arr = [];
+      keys.forEach((key) => {
+        state.dataListTotal.forEach((item) => {
+          if (item.id == key) {
+            arr.push(item);
+          }
+        });
+      });
+      state.selectedRows = arr;
+    };
+
+    const columns = computed(() => {
+      return [
+        {
+          title: "资产编码",
+          dataIndex: "property_number",
+          key: "property_number",
+          width: "15%",
+          align: "center",
+        },
+        {
+          title: "资产分类",
+          dataIndex: "type_name",
+          key: "type_name",
+          width: "15%",
+          align: "center",
+        },
+        {
+          title: "资产名称",
+          dataIndex: "name",
+          key: "name",
+          width: "15%",
+          align: "center",
+        },
+        {
+          title: "所在位置",
+          dataIndex: "position_name",
+          key: "position_name",
+          width: "15%",
+          align: "center",
+        },
+        {
+          title: "品牌",
+          dataIndex: "brand",
+          key: "brans",
+          width: "15%",
+          align: "center",
+        },
+        {
+          title: "型号",
+          dataIndex: "model_name",
+          key: "model_name",
+          width: "15%",
+          align: "center",
+        },
+      ];
+    });
+
+    const getDataList = (init = false) => {
+      state.tableLoading = true;
+      if (init) {
+        state.page = 1;
+      }
+      let params = {
+        page: state.page,
+        limit: state.pageSize,
+      };
+      if (props.status && props.status.length > 0) {
+        params.status = props.status;
+      }
+      console.log("searchParams.position_arr", searchParams.position_arr);
+      for (let key in searchParams) {
+        if (searchParams[key]) {
+          params[key] = searchParams[key];
+        }
+      }
+      context.emit("request", {
+        params: {
+          method: "post",
+          server: "/work_property",
+          url: "/property/list",
+          extra: params,
+        },
+        success: (res) => {
+          // 存储所有资产数据（dataList会因为翻页丢失）
+          let arr = [];
+          state.dataListTotal.forEach((item) => {
+            arr.push(item.id);
+          });
+          res.list.forEach((resItem) => {
+            if (!arr.includes(resItem.id)) {
+              state.dataListTotal.push(resItem);
+            }
+          });
+
+          state.dataList = res.list;
+          state.total = res.total;
+          state.tableLoading = false;
+        },
+      });
+    };
+
+    const reset = () => {
+      resetFields();
+      getDataList(true);
+    };
+
+    const getTypeList = () => {
+      context.emit("request", {
+        params: {
+          method: "get",
+          server: "/work_property",
+          url: "/system/category/tree",
+        },
+        success: (res) => {
+          const { list } = res;
+          if (list.length) {
+            state.propertyTypeList = list.map((item) => {
+              if (item.subcat && item.subcat.length > 0) {
+                item.selectable = false;
+              }
+              return item;
+            });
+          }
+        },
+      });
+    };
+
+    const getLocationList = () => {
+      context.emit("request", {
+        params: {
+          method: "get",
+          server: "/work_property",
+          url: "/system/location/tree",
+        },
+        success: (res) => {
+          state.positionList = res.list;
+        },
+      });
+    };
+
+    const init = () => {
+      state.dataList = [];
+      state.dataListTotal = [];
+      if (props.resetPage) {
+        state.page = 1;
+        state.pageSize = 20;
+      }
+      state.selectedRowKeys = props.selectedList.map((item) => item.id);
+      state.selectedRows = props.selectedList;
+      getDataList();
+      getTypeList();
+      getLocationList();
+    };
+
+    const filterTreeNodeType = (input, treeNode) => {
+      return treeNode.props.category_name.indexOf(input) >= 0;
+    };
+
+    const filterTreeNodePosition = (input, treeNode) => {
+      return treeNode.props.location_name.indexOf(input) >= 0;
+    };
+
+    const onClose = () => {
+      context.emit("close");
+    };
+
+    const onSubmit = () => {
+      context.emit("success", state.selectedRows);
+    };
+
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          init();
+        }
+      }
+    );
+    return {
+      columns,
+      pagination,
+      rowSelection,
+      replaceFields: {
+        children: "subcat",
+        title: "category_name",
+        key: "id",
+        value: "id",
+      },
+      replaceFieldsPosition: {
+        children: "subcat",
+        title: "location_name",
+        key: "id",
+        value: "id",
+      },
+      searchParams,
+      ...toRefs(state),
+      handleTableChange,
+      onClose,
+      onSubmit,
+      getDataList,
+      reset,
+      filterTreeNodeType,
+      filterTreeNodePosition,
+      SHOW_ALL,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+:deep(.ant-form-item) {
+  margin-bottom: 0;
+}
+
+:deep(.ant-table-title) {
+  padding: 0;
+  // background-color: #f8f8f9;
+  // border-bottom: 1px solid #e8eaec;
+  margin-bottom: 5px;
+  margin-top: 20px;
+}
+
+:deep(.ant-modal-body) {
+  height: 659px;
+}
+</style>