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
-        style="--el-transfer-panel-width:25vw" :titles="['待选项', '已选项']" :button-texts="['移除', '添加']" :format="{
+        v-model="transferValue"
+        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)
-    all.push(temp[key])
+  const { props: { disabled = 'disabled', key = 'id' }, lockList } = properties
+  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) => {
-      temp[e[properties.props.key]] = e
-      return e[properties.props.key]
+    const { key = 'id' } = properties.props
+    currentKeyList = response.rows.map((e) => {
+      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
-
-    return e[properties.props.key]
+    newTemp[e[key]] = e
+    return e[key]
   })
+  temp = newTemp
 }
 
 transferValueInit()