doctor-admin-components 1.0.14-beta.88 → 1.0.14-beta.89

package/README.md

@@ -16,12 +16,13 @@ npm install
 ```
 
 #### 1 把公共模块链接到全局
+
 ```
 sudo npm link
 ```
 
+#### 2 把公共模块链接到项目中
 
-#### 2 把公共模块链接到项目中 
 ```
 npm link doctor-admin-components --legacy-peer-deps
 ```
@@ -34,15 +35,15 @@ npm unlink doctor-admin-components --legacy-peer-deps
 
 ### 发布包
 
-1登录npm账号 
-确保是npm镜像
-nrm ls 查看镜像列表 
-  npm ---------- https://registry.npmjs.org/
-  yarn --------- https://registry.yarnpkg.com/
-  tencent ------ https://mirrors.cloud.tencent.com/npm/
-  cnpm --------- https://r.cnpmjs.org/
-  taobao ------- https://registry.npmmirror.com/
-  npmMirror ---- https://skimdb.npmjs.com/registry/
+1 登录 npm 账号
+确保是 npm 镜像
+nrm ls 查看镜像列表
+npm ---------- https://registry.npmjs.org/
+yarn --------- https://registry.yarnpkg.com/
+tencent ------ https://mirrors.cloud.tencent.com/npm/
+cnpm --------- https://r.cnpmjs.org/
+taobao ------- https://registry.npmmirror.com/
+npmMirror ---- https://skimdb.npmjs.com/registry/
 nrm use npm
 
 npm login
@@ -51,12 +52,13 @@ Username: xizaozao
 Password: 15839493300abc
 Email: (this IS public) 3316756985@qq.com
 如果出现这个：联系我
-Enter one-time password:  
+Enter one-time password:
 
 2 发布
-修改package.json里的 version
-    调试版本格式："1.0.0-beta.11"
-    npm publish --tag=beta
+修改 package.json 里的 version
+调试版本格式："1.0.0-beta.11"
+npm publish --tag=beta
+
 ```
 
 
@@ -85,3 +87,4 @@ https://www.npmjs.com/auth/cli/4e0a2c7a-6e12-4ca1-9462-5f8ec27e418e
 Press ENTER to open in the browser...
 
 + doctor-admin-components@1.0.14-beta.86
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "doctor-admin-components",
   "version1": "1.0.11",
-  "version": "1.0.14-beta.88",
+  "version": "1.0.14-beta.89",
   "private": false,
   "main1": "lib/index.umd.min.js",
   "main": "packages/index.js",

package/packages/index.js

@@ -57,9 +57,8 @@ import {
   FileShow,
   ShipmentPurchaseAmount,
   ContractClause,
-  ContractInfo
-
-
+  ContractInfo,
+  SendGroupSelect
 } from "./src";
 // 组件列表
 const components = [
@@ -76,7 +75,8 @@ const components = [
   FileShow,
   ShipmentPurchaseAmount,
   ContractClause,
-  ContractInfo
+  ContractInfo,
+  SendGroupSelect
 ];
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
@@ -152,5 +152,6 @@ export default {
   FileShow,
   ShipmentPurchaseAmount,
   ContractClause,
-  ContractInfo
+  ContractInfo,
+  SendGroupSelect
 };

package/packages/src/index.js

@@ -13,70 +13,74 @@
 // export { default as ContractTracingDetail } from './views/biz/contractTracing/contractTracingDetail.vue';
 // // export { default as Test } from './views/test.vue111111111111';
 
-import ContractTracingDetail from "./views/biz/contractTracing/contractTracingDetail.vue";
-import Claim from "./views/biz/claim/Claim.vue";
-import PurchaseInvoiceUpload from "./views/biz/contractTracing/purchaseInvoiceUpload.vue";
-import BizShipmentAdd from "./views/biz/bizShipment/add.vue";
-import ContractChangeLog from "./views/biz/contractTracing/contractChangeLog.vue";
-import EditBill from "./views/biz/contractTracing/editBill.vue";
-import CompanyBanks from "./views/biz/contractTracing/companyBanks.vue";
-import VDistpicker from "./views/components/RegionPicker/Distpicker.vue";
-import ContractFileDragUpload from '../src/components/FileUpload/contract-drag-new.vue';
-import FileShow from  '../src/views/biz/bizFileInfo/fileShow.vue'
+import ContractTracingDetail from './views/biz/contractTracing/contractTracingDetail.vue'
+import Claim from './views/biz/claim/Claim.vue'
+import PurchaseInvoiceUpload from './views/biz/contractTracing/purchaseInvoiceUpload.vue'
+import BizShipmentAdd from './views/biz/bizShipment/add.vue'
+import ContractChangeLog from './views/biz/contractTracing/contractChangeLog.vue'
+import EditBill from './views/biz/contractTracing/editBill.vue'
+import CompanyBanks from './views/biz/contractTracing/companyBanks.vue'
+import VDistpicker from './views/components/RegionPicker/Distpicker.vue'
+import ContractFileDragUpload from '../src/components/FileUpload/contract-drag-new.vue'
+import FileShow from '../src/views/biz/bizFileInfo/fileShow.vue'
 import ShipmentPurchaseAmount from '../src/views/biz/contractTracing/shipmentPurchaseAmount.vue'
 import ContractClause from '../src/views/biz/contractTracing/contractClause.vue'
 import ContractInfo from '../src/views/biz/contractTracing/info.vue'
+import SendGroupSelect from '../src/views/biz/SendGroupSelect/index.vue'
 
 // 为组件提供 install 安装方法，供按需引入
 
 ContractTracingDetail.install = function (Vue) {
-  Vue.component(ContractTracingDetail.name, ContractTracingDetail);
-};
+  Vue.component(ContractTracingDetail.name, ContractTracingDetail)
+}
 
 Claim.install = function (Vue) {
-  Vue.component(Claim.name, Claim);
-};
+  Vue.component(Claim.name, Claim)
+}
 
 PurchaseInvoiceUpload.install = function (Vue) {
-  Vue.component(PurchaseInvoiceUpload.name, PurchaseInvoiceUpload);
-};
+  Vue.component(PurchaseInvoiceUpload.name, PurchaseInvoiceUpload)
+}
 
 BizShipmentAdd.install = function (Vue) {
-  Vue.component(BizShipmentAdd.name, BizShipmentAdd);
-};
+  Vue.component(BizShipmentAdd.name, BizShipmentAdd)
+}
 
 ContractChangeLog.install = function (Vue) {
-  Vue.component(ContractChangeLog.name, ContractChangeLog);
-};
+  Vue.component(ContractChangeLog.name, ContractChangeLog)
+}
 
 EditBill.install = function (Vue) {
-  Vue.component(EditBill.name, EditBill);
-};
+  Vue.component(EditBill.name, EditBill)
+}
 
 CompanyBanks.install = function (Vue) {
-  Vue.component(CompanyBanks.name, CompanyBanks);
-};
+  Vue.component(CompanyBanks.name, CompanyBanks)
+}
 
 VDistpicker.install = function (Vue) {
-  Vue.component(CompanyBanks.name, CompanyBanks);
-};
+  Vue.component(CompanyBanks.name, CompanyBanks)
+}
 ContractFileDragUpload.install = function (Vue) {
-  Vue.component(ContractFileDragUpload.name, ContractFileDragUpload);
-};
+  Vue.component(ContractFileDragUpload.name, ContractFileDragUpload)
+}
 
 FileShow.install = function (Vue) {
-  Vue.component(FileShow.name, FileShow);
-};
+  Vue.component(FileShow.name, FileShow)
+}
 
 ShipmentPurchaseAmount.install = function (Vue) {
-  Vue.component(ShipmentPurchaseAmount.name, ShipmentPurchaseAmount);
-};
+  Vue.component(ShipmentPurchaseAmount.name, ShipmentPurchaseAmount)
+}
 ContractClause.install = function (Vue) {
-  Vue.component(ContractClause.name, ContractClause);
-};
+  Vue.component(ContractClause.name, ContractClause)
+}
 ContractInfo.install = function (Vue) {
-  Vue.component(ContractInfo.name, ContractInfo);
-};
+  Vue.component(ContractInfo.name, ContractInfo)
+}
+SendGroupSelect.install = function (Vue) {
+  Vue.component(SendGroupSelect.name, SendGroupSelect)
+}
 
 // 导出组件
 export {
@@ -92,5 +96,6 @@ export {
   FileShow,
   ShipmentPurchaseAmount,
   ContractClause,
-  ContractInfo
-};
+  ContractInfo,
+  SendGroupSelect
+}

package/packages/src/views/biz/SendGroupSelect/index.vue

@@ -0,0 +1,492 @@
+<template>
+  <div class="send-group-select">
+    <div class="section-title">
+      <span>{{ title }}</span>
+      <el-tag size="small" type="info">已选 {{ selectedGroupIds.length }} 个</el-tag>
+    </div>
+
+    <div class="group-select-row">
+      <el-row :gutter="16" type="flex" align="stretch">
+        <el-col v-if="filterable" :span="6">
+          <div class="filter-panel">
+            <div v-for="filter in normalizedFilters" :key="filter.key" class="filter-block">
+              <div class="filter-label">{{ filter.label }}</div>
+              <template v-if="filter.options.length > 3">
+                <el-select
+                  v-if="!filter.isTree"
+                  v-model="localSelectedFilters[filter.key]"
+                  :multiple="true"
+                  placeholder="请选择"
+                  @change="onFilterChange"
+                  class="filter-select"
+                >
+                  <el-option v-for="item in filter.options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <el-cascader
+                  v-else
+                  v-model="localSelectedFilters[filter.key]"
+                  :options="filter.options"
+                  :props="{
+                    multiple: true,
+                    label: 'dictLabel',
+                    value: 'id',
+                    children: 'children',
+                    emitPath: false
+                  }"
+                  placeholder="请选择"
+                  :show-all-levels="false"
+                  clearable
+                  filterable
+                  @change="onFilterChange"
+                  class="filter-select"
+                />
+              </template>
+              <template v-else>
+                <el-checkbox
+                  v-for="item in filter.options"
+                  :key="item.value"
+                  :value="localSelectedFilters[filter.key] && localSelectedFilters[filter.key].includes(item.value)"
+                  @change="toggleFilter(filter.key, item.value)"
+                >
+                  {{ item.label }}
+                </el-checkbox>
+              </template>
+            </div>
+
+            <div class="filter-footer">
+              <el-button type="text" @click="clearFilters">清空筛选</el-button>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="filterable ? 18 : 24">
+          <div v-loading="groupLoading" class="transfer-container">
+            <el-transfer
+              v-model="selectedGroupIds"
+              :data="transferGroups"
+              :titles="['可选群', '已选群']"
+              :filterable="true"
+              filter-placeholder="搜索群"
+              :filter-method="handleTransferFilter"
+              :props="{
+                key: 'groupId',
+                label: 'toolsName'
+              }"
+            >
+              <span slot-scope="{ option }">
+                <span class="group-name">{{ option.toolsName }}</span>
+                <el-tag v-for="tag in option.filterTags" :key="tag.type" size="mini" class="group-tag" :type="getTagType(tag.type)">
+                  {{ tag.label }}
+                </el-tag>
+              </span>
+            </el-transfer>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="group-footer">
+      <span>匹配到 {{ transferGroups.length }} 个群，共 {{ groupTotal }} 个群</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request'
+
+export default {
+  name: 'SendGroupSelect',
+  dicts: ['customer_grade', 'group_type'],
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    filters: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: '发送群'
+    },
+    pageSize: {
+      type: Number,
+      default: 1000000
+    },
+    requestMethod: {
+      type: String,
+      default: 'post'
+    },
+    requestParams: {
+      type: Object,
+      default: () => ({})
+    },
+    filterValues: {
+      type: Object,
+      default: () => ({})
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    groupTypeFilter: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      selectedGroupIds: [...this.value],
+      localSelectedFilters: {},
+      groupLoading: false,
+      groupTotal: 0,
+      allGroups: [],
+      groups: []
+    }
+  },
+  computed: {
+    selectedFilters() {
+      if (Object.keys(this.filterValues).length > 0) {
+        return this.filterValues
+      }
+      return this.localSelectedFilters
+    },
+    normalizedFilters() {
+      return this.filters
+        .map((filter) => {
+          let options = filter.options || []
+          if (!filter.isTree) {
+            options = options.map((item) => (typeof item === 'object' ? item : { label: item, value: item }))
+          }
+          return {
+            ...filter,
+            key: filter.key,
+            label: filter.label,
+            options
+          }
+        })
+        .sort((a, b) => {
+          const aLen = a.options.length
+          const bLen = b.options.length
+          const aLess3 = aLen <= 3
+          const bLess3 = bLen <= 3
+          if (aLess3 && !bLess3) return -1
+          if (!aLess3 && bLess3) return 1
+          return 0
+        })
+    },
+    transferGroups() {
+      return this.groups.map((group) => ({
+        groupId: group.groupId,
+        toolsName: group.toolsName,
+        filterTags: this.getFilterTagsForGroup(group)
+      }))
+    },
+    selectedGroups() {
+      return this.allGroups.filter((item) => this.selectedGroupIds.includes(item.groupId))
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (this.isSameList(val || [], this.selectedGroupIds)) {
+          return
+        }
+        this.selectedGroupIds = [...(val || [])]
+        this.applyFilters()
+      },
+      deep: true
+    },
+    selectedGroupIds: {
+      handler(val) {
+        this.$emit('input', val)
+        this.emitSelectedGroups()
+        this.applyFilters()
+      },
+      deep: true
+    },
+    filterValues: {
+      handler() {
+        this.applyFilters()
+      },
+      deep: true
+    },
+    filters: {
+      handler() {
+        this.initSelectedFilters()
+        this.applyFilters()
+      },
+      deep: true
+    },
+    url() {
+      this.loadGroupList()
+    },
+    requestParams: {
+      handler() {
+        this.loadGroupList()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.initSelectedFilters()
+    this.loadGroupList()
+  },
+  methods: {
+    isSameList(left, right) {
+      if (left.length !== right.length) {
+        return false
+      }
+      return left.every((item, index) => item === right[index])
+    },
+    initSelectedFilters() {
+      const next = {}
+      this.normalizedFilters.forEach((filter) => {
+        next[filter.key] = this.localSelectedFilters[filter.key] || []
+      })
+      this.localSelectedFilters = next
+    },
+    loadGroupList() {
+      this.groupLoading = true
+      this.allGroups = []
+      this.groups = []
+      this.groupTotal = 0
+
+      const params = {
+        pageNum: 1,
+        pageSize: this.pageSize,
+        orderByColumn: 'toolsGroupId',
+        isAsc: 'desc',
+        ...this.requestParams
+      }
+
+      return request({
+        url: this.buildRequestUrl(params),
+        method: this.requestMethod,
+        data: params,
+        params: this.requestMethod.toLowerCase() === 'get' ? params : undefined
+      })
+        .then((response) => {
+          const data = response.data || {}
+          this.allGroups = data.rows
+          this.groupTotal = Number(data.total) || 0
+          this.applyFilters()
+          this.emitSelectedGroups()
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.groupLoading = false
+        })
+    },
+    buildRequestUrl(params) {
+      if (this.requestMethod.toLowerCase() !== 'post') {
+        return this.url
+      }
+      const joiner = this.url.includes('?') ? '&' : '?'
+      return `${this.url}${joiner}pageNum=${params.pageNum}&pageSize=${params.pageSize}&orderByColumn=${params.orderByColumn}&isAsc=${params.isAsc}`
+    },
+    applyFilters() {
+      const filteredGroups = this.allGroups.filter((group) => {
+        return this.normalizedFilters.every((filter) => this.matchFilter(group, filter))
+      })
+
+      const selectedGroups = this.allGroups.filter((group) => this.selectedGroupIds.includes(group.groupId))
+      this.groups = [...new Map([...selectedGroups, ...filteredGroups].map((item) => [item.groupId, item])).values()]
+    },
+    matchFilter(group, filter) {
+      const selected = this.selectedFilters[filter.key] || []
+      if (selected.length === 0) {
+        return true
+      }
+
+      if (filter.key === 'groupTypeList' && this.groupTypeFilter) {
+        return this.groupTypeFilter(group, selected)
+      }
+
+      const rawField = filter.field || filter.key
+      const groupValue = group[rawField]
+
+      if (filter.isTree) {
+        const selectedIds = selected.map(String)
+        const groupIds = Array.isArray(groupValue) ? groupValue.map(String) : [String(groupValue)]
+        return selectedIds.some((id) => groupIds.includes(id))
+      }
+
+      if (Array.isArray(groupValue)) {
+        return groupValue.some((val) => selected.includes(val))
+      }
+      return selected.includes(groupValue)
+    },
+    toggleFilter(key, value) {
+      const list = [...(this.localSelectedFilters[key] || [])]
+      const index = list.indexOf(value)
+      if (index > -1) {
+        list.splice(index, 1)
+      } else {
+        list.push(value)
+      }
+      this.$set(this.localSelectedFilters, key, list)
+      this.onFilterChange()
+    },
+    clearFilters() {
+      Object.keys(this.localSelectedFilters).forEach((key) => {
+        this.$set(this.localSelectedFilters, key, [])
+      })
+      this.onFilterChange()
+    },
+    onFilterChange() {
+      this.applyFilters()
+      this.$emit('filter-change', this.selectedFilters)
+    },
+    handleTransferFilter(query, item) {
+      return item.toolsName.toLowerCase().includes(query.toLowerCase())
+    },
+    emitSelectedGroups() {
+      this.$emit('selected-change', this.selectedGroups)
+    },
+    getTagType(filterKey) {
+      const typeMap = {
+        language: '',
+        groupChannel: 'success',
+        department: 'warning',
+        groupTypeList: 'danger'
+      }
+      return typeMap[filterKey] || ''
+    },
+    getFilterTagsForGroup(group) {
+      const tags = []
+      const checkboxFilters = this.normalizedFilters.filter((filter) => !filter.isTree && filter.options.length <= 3)
+      checkboxFilters.forEach((filter) => {
+        const rawField = filter.field || filter.key
+        const groupValue = group[rawField]
+        if (Array.isArray(groupValue)) {
+          groupValue.forEach((val) => {
+            const option = filter.options.find((opt) => opt.value === val)
+            if (option) {
+              tags.push({ label: option.label, type: filter.key })
+            }
+          })
+        } else if (groupValue) {
+          const option = filter.options.find((opt) => opt.value === groupValue)
+          if (option) {
+            tags.push({ label: option.label, type: filter.key })
+          }
+        }
+      })
+
+      return tags
+    }
+  }
+}
+</script>
+
+<style scoped>
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.group-select-row {
+  margin-bottom: 12px;
+}
+
+.transfer-container {
+  min-height: 400px;
+  height: 100%;
+  overflow-x: auto;
+}
+
+.transfer-container ::v-deep .el-transfer {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  align-items: center !important;
+  min-width: 600px;
+}
+
+.transfer-container ::v-deep .el-transfer-panel {
+  width: 45%;
+  min-width: 220px;
+  height: 400px;
+}
+
+.transfer-container ::v-deep .el-transfer-panel__body {
+  height: calc(100% - 60px);
+}
+
+.transfer-container ::v-deep .el-transfer-panel__list {
+  height: calc(100% - 40px);
+}
+
+.transfer-container ::v-deep .el-transfer__buttons {
+  padding: 0 10px;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+}
+
+.transfer-container ::v-deep .el-transfer__buttons .el-button {
+  margin: 5px 0;
+  padding: 8px 10px;
+}
+
+.filter-panel {
+  width: 100%;
+  border: 1px solid #ebeef5;
+  background: #fafafa;
+  border-radius: 8px;
+  padding: 14px 16px 10px;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-block + .filter-block {
+  margin-top: 14px;
+}
+
+.filter-label {
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #909399;
+}
+
+.filter-select {
+  width: 100%;
+}
+
+.filter-footer {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  color: #909399;
+}
+
+.group-footer {
+  margin-top: 12px;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+}
+
+.group-name {
+  margin-right: 6px;
+}
+
+.group-tag {
+  margin-left: 4px;
+}
+</style>