feat(prop): lockList属性，禁止编辑已选项

packages/select-transfer-modal/index.vue

@@ -2,13 +2,13 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-14 11:07:15
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-16 11:11:30
+ * @LastEditTime: 2023-08-18 16:35:25
  * @FilePath: \vue3\packages\select-transfer-modal\index.vue
  * @Description:
  *
 -->
 <template>
-  <span v-if="!hideButton" @click="open">
+  <span v-if="!hideButton" @click="openDialog">
     <slot>
       <el-button type="primary" plain>点击选择</el-button>
     </slot>
@@ -37,11 +37,20 @@
         </el-form-item>
       </el-form>
       <el-transfer
-        v-model="transferValue" v-loading="loading" inline-block text-left
+        v-model="transferValue"
-        style="--el-transfer-panel-width:25vw" :titles="['待选项', '已选项']" :button-texts="['移除', '添加']" :format="{
+        v-loading="loading"
+        inline-block
+        text-left
+        style="--el-transfer-panel-width:25vw"
+        :titles="['待选项', '已选项']"
+        :button-texts="['移除', '添加']"
+        :format="{
           noChecked: '${total}',
           hasChecked: '${checked}/${total}',
-        }" :data="data" :filter-method="filterMethod" :props="props"
+        }"
+        :data="data"
+        :filter-method="filterMethod"
+        :props="props"
       >
         <template #default="{ option }">
           <slot name="transfer" :option="option">
@@ -90,6 +99,7 @@ const properties = withDefaults(
     width?: string | number
     zIndex?: number
     props?: TransferPropsAlias
+    lockList?: TransferKey[]
     formattter?: (row: Record<string, any>) => any
   }>(),
   {
@@ -117,12 +127,13 @@ const showDialog = ref(false)
 
 let transferValue = $ref<TransferKey[]>([])
 
-const temp = reactive({})
+let temp = $ref({})
 
-let currentIdList = $ref<any[]>([])
+let currentKeyList = $ref<TransferKey[]>([])
 
 function filterMethod(_query: string, item: TransferDataItem) {
-  return currentIdList.includes(item[properties.props.key]) || transferValue.includes(item[properties.props.key])
+  const { key = 'id' } = properties.props
+  return currentKeyList.includes(item[key]) || transferValue.includes(item[key])
 }
 
 const queryParams = reactive({
@@ -132,8 +143,13 @@ const queryParams = reactive({
 
 const data = computed(() => {
   const all: any[] = []
-  for (const key in temp)
+  const { props: { disabled = 'disabled', key = 'id' }, lockList } = properties
-    all.push(temp[key])
+  for (const i in temp) {
+    all.push({
+      ...temp[i],
+      [disabled]: lockList?.includes(temp[i][key]),
+    })
+  }
 
   return all
 })
@@ -143,7 +159,6 @@ let loading = $ref(false)
 
 /* 表单绑定的ref */
 const queryRef = $ref<FormInstance>(null)
-
 /** 查询表格数据 */
 async function getList() {
   loading = true
@@ -152,9 +167,10 @@ async function getList() {
       ...properties.defaultParams,
       ...queryParams,
     })
-    currentIdList = response.rows.map((e) => {
+    const { key = 'id' } = properties.props
-      temp[e[properties.props.key]] = e
+    currentKeyList = response.rows.map((e) => {
-      return e[properties.props.key]
+      temp[e[key]] = e
+      return e[key]
     })
     total = response.total
   }
@@ -162,7 +178,7 @@ async function getList() {
     loading = false
   }
 }
-function open() {
+function openDialog() {
   if (properties.hideButton)
     emit('update:show', true)
   else
@@ -182,7 +198,7 @@ function confirm() {
 function closed() {
   queryRef?.resetFields()
   queryParams.pageNum = 1
-  currentIdList = []
+  currentKeyList = []
 }
 
 /** 重置按钮操作 */
@@ -199,12 +215,13 @@ function handleSizeChange(val: number) {
 
 function transferValueInit() {
   const { value = [] } = properties
-
+  const { key = 'id' } = properties.props
+  const newTemp = {}
   transferValue = value.map((e) => {
-    temp[e[properties.props.key]] = e
+    newTemp[e[key]] = e
-
+    return e[key]
-    return e[properties.props.key]
   })
+  temp = newTemp
 }
 
 transferValueInit()

stories/SelectTransferModal.stories.ts

@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-14 11:07:15
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-16 11:54:25
+ * @LastEditTime: 2023-08-18 16:45:45
  * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
  * @Description:
  *
@@ -49,6 +49,7 @@ const meta = {
     title: '选择',
     width: '70%',
     zIndex: 2023,
+    lockList: undefined,
   },
   render: args => ({
     components: { ThSelectTransferModal },
@@ -61,6 +62,7 @@ const meta = {
                  :form-items="args.formItems"
                  :default-params="args.defaultParams"
                  :hide-pagination="args.hidePagination"
+                 :lock-list="args.lockList"
                  :request="args.request"
                  :page-sizes="args.pageSizes"
                  :pager-count="args.pagerCount"
@@ -106,6 +108,28 @@ export const Data: Story = {
   render: meta.render,
 }
 
+export const TransferLock: Story = {
+  name: '锁定已编辑项',
+  args: {
+    ...Data.args,
+    value: [{
+      id: 1,
+      name: 'name1',
+      value: 'value1',
+    }, {
+      id: 12,
+      name: 'name12',
+      value: 'value12',
+    }, {
+      id: 33,
+      name: 'name33',
+      value: 'value33',
+    }],
+    lockList: [1, 12, 33],
+  },
+  render: meta.render,
+}
+
 export const TransferSlot: Story = {
   name: '插槽',
   args: {
@@ -123,6 +147,7 @@ export const TransferSlot: Story = {
                  :default-params="args.defaultParams"
                  :hide-pagination="args.hidePagination"
                  :request="args.request"
+                 :lock-list="args.lockList"
                  :page-sizes="args.pageSizes"
                  :pager-count="args.pagerCount"
                  :props="args.props"