el-plus-crud 0.1.19 → 0.1.21

package/lib/components/el-plus-form/components/ElPlusFormLink.vue

@@ -87,6 +87,8 @@ const multipleTableRef = ref()
 
 // 存储的值
 const selectData = reactive([] as ILinkItem[])
+// 存储历史选中-取消后要还原
+const selectOldData = reactive([] as ILinkItem[])
 
 /**
  * 处理点击事件
@@ -97,6 +99,8 @@ function handelVisibleChange(val: any) {
     selectRef.value.blur()
     isShowDialog.value = true
     selectList.value = cloneDeep(selectData.map((item) => item.dataItem))
+    // 这里存储一下老数据
+    selectOldData.splice(0, selectOldData.length, ...selectData)
   }
 }
 
@@ -149,6 +153,8 @@ function handelTagRemove(item: ILinkItem) {
  */
 function cancel() {
   isShowDialog.value = false
+  // 这里重置一下老数据
+  selectData.splice(0, selectData.length, ...selectOldData)
 }
 
 /**
@@ -204,6 +210,27 @@ watch(
   { deep: true, immediate: true }
 )
 
+watch(
+  () => props.modelValue,
+  () => {
+    selectData.splice(0, selectData.length)
+    values.splice(0, values.length)
+    // 这里默认选中
+    if (props.modelValue && Array.isArray(props.modelValue)) {
+      const [ids, names] = props.modelValue as Array<string[]>
+      if (ids.length > 0 && ids.length === names.length) {
+        ids.map((id, i) => {
+          // 构建选中数据
+          selectData.push({ label: names[i], value: id, dataItem: { [props.desc.lkey]: names[i], [vkey.value]: id } })
+          values.push(id)
+        })
+      }
+    }
+    options.splice(0, options.length, ...selectData)
+  },
+  { deep: true, immediate: true }
+)
+
 onMounted(async () => {})
 </script>
 <style lang="scss" scoped>

package/lib/components/el-plus-form/components/ElPlusFormLkuser.vue

@@ -123,6 +123,18 @@ const selectUser = reactive([] as Array<ILinkItem>)
 const selectOptions = reactive([] as any[])
 const selectAttrs = ref({})
 
+// 左边列表idkey namekey
+const lIdKey = ref(props.desc?.lIdKey || 'id')
+const lNameKey = ref(props.desc?.lNameKey || 'name')
+// 右边列表idkey namekey
+const rIdKey = ref(props.desc?.rIdKey || 'userId')
+const rNameKey = ref(props.desc?.rNameKey || 'nickname')
+
+// 查询左边列表idKey
+const lQueryIdKey = ref(props.desc?.lQueryIdKey || 'deptId')
+// 组织架构列表
+const deptDataList = ref((props.desc?.deptDataList || []) as any[])
+
 /**
  * 处理自定义请求
  * @param param
@@ -142,15 +154,20 @@ const multipleTableRef = ref()
 const tableData = computed(() => {
   const tempList = [] as ILinkItem[]
   // 遍历组织架构数据
-  let tempData = cloneDeep(globalData[defaultConf.form?.linkUser?.deptListKey || ''])
+  let tempData = [] as any[]
+  if (deptDataList.value.length) {
+    tempData = deptDataList.value
+  } else {
+    tempData = cloneDeep(globalData[defaultConf.form?.linkUser?.deptListKey || ''])
+  }
   if (deptTreeIndex.value && deptTreeIndex.value.length > 0) {
     deptTreeIndex.value.map((item) => {
       tempData = tempData[item].children || []
     })
   }
-  tempData.map((item: any) => tempList.push({ type: 2, label: item.name, value: item.id }))
+  tempData.map((item: any) => tempList.push({ type: 2, label: item[lNameKey.value], value: item[lIdKey.value] }))
   // 遍历用户数据
-  tableUserData.value.map((item) => tempList.push({ type: 1, label: item.nickname, value: item.userId }))
+  tableUserData.value.map((item) => tempList.push({ type: 1, label: item[rNameKey.value], value: item[rIdKey.value] }))
 
   // 这里默认选中
   nextTick(() => {
@@ -228,7 +245,7 @@ function handelSelectChange(val: any) {
 async function selectRemote(nickname: string) {
   if (nickname.length > 0) {
     return ((await defaultConf.form?.linkUser?.getUserList({ nickname, current: 1, size: 10, enabled: 1 })) as any).records?.map((item: any) => {
-      return { value: item.userId, label: item.nickname }
+      return { value: item[rIdKey.value], label: item[rNameKey.value] }
     })
   }
   return []
@@ -240,7 +257,7 @@ async function selectRemote(nickname: string) {
  */
 async function goInto(item: ILinkItem, index: number) {
   // 查询机构用户
-  tableUserData.value = (await defaultConf.form?.linkUser?.getUserList({ deptId: item.value, size: 999 })).records as any[]
+  tableUserData.value = (await defaultConf.form?.linkUser?.getUserList({ [lQueryIdKey.value]: item.value, size: 999 })).records as any[]
   deptTreeIndex.value.push(index)
   deptTreeItems.value.push(item)
 }
@@ -251,7 +268,7 @@ async function goInto(item: ILinkItem, index: number) {
  */
 async function goIndex(index: number) {
   // 查询机构用户
-  tableUserData.value = index >= 0 ? ((await defaultConf.form?.linkUser?.getUserList({ deptId: deptTreeItems.value[index].value, size: 999 })).records as any[]) : []
+  tableUserData.value = index >= 0 ? ((await defaultConf.form?.linkUser?.getUserList({ [lQueryIdKey.value]: deptTreeItems.value[index].value, size: 999 })).records as any[]) : []
   deptTreeIndex.value.splice(index + 1)
   deptTreeItems.value.splice(index + 1)
 }
@@ -463,6 +480,10 @@ onMounted(async () => {
       padding: 0 10px;
       margin-bottom: 20px;
       cursor: pointer;
+      span {
+        line-height: 24px;
+        color: var(--el-color-primary);
+      }
     }
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "el-plus-crud",
   "description": "采用Vue3 + TS，封装的element-plus数据驱动表单、列表组件",
   "author": "K.D.Jack",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "license": "MIT",
   "private": false,
   "main": "dist/el-plus-crud.mjs",