feat: 多选组件+框架合同新增&编辑-品种使用多选组件

史婷婷
1 parent 3429c884
Showing 3 changed files with 200 additions and 4 deletions
components/multi-select/index.vue
pages/contract_framework/add.vue
pages/contract_framework/modify.vue
--- a/components/multi-select/index.vue 0 → 100644
View file @5823178
+++ b/components/multi-select/index.vue 0 → 100644
View file @5823178
+<template>
+  <uni-popup ref="popup" type="bottom" :mask-click="false" :safe-area="true">
+    <view class="sheet">
+      <view class="sheet-header">
+        <text class="cancel" @click="onCancel">取消</text>
+        <text class="title">{{ title }}</text>
+        <text class="ok" @click="onConfirm">确认</text>
+      </view>
+      <view class="sheet-body">
+        <view
+          v-for="(opt, i) in options"
+          :key="i"
+          :class="['option', { selected: isSelected(opt) }]"
+          @click="toggle(opt)"
+        >
+          <text class="label">{{ displayOf(opt) }}</text>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script>
+export default {
+  name: 'MultiSelectSheet',
+  props: {
+    visible: { type: Boolean, default: false },
+    title: { type: String, default: '请选择' },
+    // 统一约定：options 为 [{ label: string, value: string|number }]
+    options: { type: Array, default: () => [] },
+    // 接收逗号分隔的字符串 '111,222,333'
+    value: { type: String, default: '' }
+  },
+  data() {
+    return {
+      innerValue: [] // 内部维护数组形式
+    }
+  },
+  watch: {
+    value(v) { this.initInnerValue(v) },
+    visible(v) { v ? this.open() : this.close() }
+  },
+  mounted() {
+    if (this.visible) this.open()
+  },
+  methods: {
+    initInnerValue(val) {
+      if (!val) {
+        this.innerValue = []
+      } else {
+        this.innerValue = String(val).split(',').filter(x => x)
+      }
+    },
+    open() {
+      this.initInnerValue(this.value)
+      this.$refs.popup && this.$refs.popup.open()
+      this.$emit('update:visible', true)
+    },
+    close() {
+      this.$refs.popup && this.$refs.popup.close()
+      this.$emit('update:visible', false)
+    },
+    displayOf(opt) {
+      if (!opt) return ''
+      return opt.label != null ? String(opt.label) : ''
+    },
+    valueOf(opt) {
+      if (!opt) return ''
+      return opt.value != null ? String(opt.value) : ''
+    },
+    isSelected(opt) {
+      const v = this.valueOf(opt)
+      return this.innerValue.includes(v)
+    },
+    toggle(opt) {
+      const v = this.valueOf(opt)
+      const idx = this.innerValue.indexOf(v)
+      if (idx > -1) {
+        this.innerValue.splice(idx, 1)
+      } else {
+        this.innerValue.push(v)
+      }
+    },
+    onCancel() {
+      this.close()
+      this.$emit('cancel')
+    },
+    onConfirm() {
+      const selectedValues = this.innerValue
+      // 保持原始选项顺序
+      const sortedValues = []
+      const sortedLabels = []
+      
+      this.options.forEach(opt => {
+        const v = this.valueOf(opt)
+        if (selectedValues.includes(v)) {
+          sortedValues.push(v)
+          sortedLabels.push(this.displayOf(opt))
+        }
+      })
+
+      const valStr = sortedValues.join(',')
+      const labelStr = sortedLabels.join(',')
+      
+      this.$emit('confirm', { value: valStr, label: labelStr })
+      this.$emit('input', valStr)
+      this.$emit('update:value', valStr)
+      this.close()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sheet {
+  width: 100%;
+  max-height: 45vh;
+  background: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx 32rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.title {
+  font-size: 36rpx;
+  font-weight: 600;
+}
+.cancel {
+  color: rgba(0,0,0,0.6);
+  font-size: 28rpx;
+}
+.ok {
+  color: $theme-primary;
+  font-size: 28rpx;
+}
+.sheet-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 32rpx;
+}
+.option {
+  padding: 20rpx;
+  line-height: 40rpx;
+  background: #fff;
+  text-align: center;
+  border-radius: 12rpx;
+  font-size: 32rpx;
+  margin-bottom: 20rpx;
+  .label {
+    color: rgba(0,0,0,0.6);
+    font-size: 32rpx;
+  }
+  &.selected {
+    background: #f3f3f3;
+    .label {
+      color: rgba(0,0,0,0.9);
+    }
+  }
+}
+</style>
--- a/pages/contract_framework/add.vue
View file @5823178
+++ b/pages/contract_framework/add.vue
View file @5823178
@@ -49,6 +49,8 @@
     <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
       @confirm="onSheetConfirm" />
+    <MultiSelectSheet :visible.sync="multiSheet.visible" :title="multiSheet.title" :options="multiSheet.options" v-model="multiSheet.value"
+      @confirm="onMultiSheetConfirm" />
     <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
       :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
@@ -57,12 +59,13 @@
 </template>
 <script>
 import SingleSelectSheet from '@/components/single-select/index.vue'
+import MultiSelectSheet from '@/components/multi-select/index.vue'
 import RelateSelectSheet from '@/components/relate-select/index.vue'
 import { productVarietyQuery, getCodeApi, createApi } from '@/api/contract'
 import { getDicByCodes } from '@/utils/dic'
 export default {
-  components: { SingleSelectSheet, RelateSelectSheet },
+  components: { SingleSelectSheet, RelateSelectSheet, MultiSelectSheet },
   data() {
     return {
       form: {
@@ -80,6 +83,7 @@ export default {
       productVarietyList: [],
       companyList: [],
       sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
+      multiSheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
       relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' }
     }
   },
@@ -132,14 +136,25 @@ export default {
         const match = (options || []).find(o => String(o.label) === String(current) || String(o.value) === String(current))
         this.sheet = { ...this.sheet, visible: true, title, options, field, value: match ? match.value : '' }
       }
+      const setMultiSheet = (title, options) => {
+        const current = this.form[field]
+        this.multiSheet = { ...this.multiSheet, visible: true, title, options, field, value: current || '' }
+      }
+
       if (field === 'company') {
         setSheet('所属单位', this.companyList)
       } else if (field === 'materialTypeId') {
-        setSheet('品种', this.productVarietyList)
+        setMultiSheet('品种', this.productVarietyList)
       } else if (field === 'hasFrameworkAgreement') {
         setSheet('是否签订框架合同', [{ label: '是', value: true }, { label: '否', value: false }])
       }
     },
+    onMultiSheetConfirm({ value, label }) {
+      const field = this.multiSheet.field
+      if (!field) return
+      this.form[field] = value || ''
+      this.form[field + 'Name'] = label || ''
+    },
     onSheetConfirm({ value, label }) {
       const field = this.sheet.field
       if (!field) return
--- a/pages/contract_framework/modify.vue
View file @5823178
+++ b/pages/contract_framework/modify.vue
View file @5823178
@@ -49,6 +49,8 @@
     <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
       @confirm="onSheetConfirm" />
+    <MultiSelectSheet :visible.sync="multiSheet.visible" :title="multiSheet.title" :options="multiSheet.options" v-model="multiSheet.value"
+      @confirm="onMultiSheetConfirm" />
     <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
       :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
       :selectedKeys.sync="relate.selectedKeys" @confirm="onRelateConfirm" />
@@ -57,12 +59,13 @@
 <script>
 import SingleSelectSheet from '@/components/single-select/index.vue'
+import MultiSelectSheet from '@/components/multi-select/index.vue'
 import RelateSelectSheet from '@/components/relate-select/index.vue'
 import { productVarietyQuery, getCodeApi, getDetailApi, updateApi } from '@/api/contract'
 import { getDicByCodes } from '@/utils/dic'
 export default {
-  components: { SingleSelectSheet, RelateSelectSheet },
+  components: { SingleSelectSheet, RelateSelectSheet, MultiSelectSheet },
   data() {
     return {
       id: '',
@@ -70,6 +73,7 @@ export default {
       companyList: [],
       productVarietyList: [],
       sheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
+      multiSheet: { visible: false, title: '请选择', field: '', options: [], value: '' },
       relate: { visible: false, title: '选择', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' }
     }
   },
@@ -122,10 +126,21 @@ export default {
         const match = (options || []).find(o => String(o.value) === String(current))
         this.sheet = { ...this.sheet, visible: true, title, options, field, value: match ? match.value : '' }
       }
+      const setMultiSheet = (title, options) => {
+        const current = this.form[field]
+        this.multiSheet = { ...this.multiSheet, visible: true, title, options, field, value: current || '' }
+      }
+
       if (field === 'company') setSheet('所属单位', this.companyList)
-      else if (field === 'materialTypeId') setSheet('品种', this.productVarietyList)
+      else if (field === 'materialTypeId') setMultiSheet('品种', this.productVarietyList)
       else if (field === 'hasFrameworkAgreement') setSheet('是否签订框架合同', [{ label: '是', value: true }, { label: '否', value: false }])
     },
+    onMultiSheetConfirm({ value, label }) {
+      const field = this.multiSheet.field
+      if (!field) return
+      this.form[field] = value || ''
+      this.form[field + 'Name'] = label || ''
+    },
     onSheetConfirm({ value, label }) {
       const field = this.sheet.field
       if (!field) return