代码提交

src/modules/admin/category/component/AddDialog.vue

@@ -5,18 +5,10 @@ import TreeDialog from './TreeDialog.vue'
 import { useMapStore } from '@/stores/map'
 const categoryName = ref('')
 const store = useMapStore()
+const classList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
+const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
 const isTreeVisible = ref(false)
 const formRef = ref()
-interface mapList {
-  label: string
-  value: string
-  data_dictionary_id: string
-  sort: string
-  remark: string
-  id: string
-}
-let classList = $ref<mapList[]>([])
-let statusList = $ref<mapList[]>([])
 
 const categoryForm = reactive({
   parent_id: '',
@@ -33,21 +25,30 @@ const rules = reactive<FormRules>({
   ]
 })
 const props = defineProps({
+  // 是否弹框
   dialogVisible: {
     type: Boolean,
     required: true
   },
+  // 编辑数据
   editData: {
     type: Object,
     required: true
   },
+  // 是否编辑
   isEdit: {
     type: Boolean,
     required: true
   },
+  // 弹框标题
   title: {
     type: String,
     required: true
+  },
+  // 上级类别名称
+  prevCategoryName: {
+    type: String,
+    required: true
   }
 })
 const emit = defineEmits<{
@@ -83,18 +84,14 @@ const handleConfirm = () => {
     emit('confirm', { categoryForm, isUpdate: 0 })
   }
 }
-const getMapList = async () => {
-  await store.getMapList()
-  classList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-  statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-}
+
 onMounted(() => {
-  console.log(props.editData, 'props.editData111')
-  getMapList()
   categoryName.value = props.editData.category_name
-  categoryForm.depth = props.editData.depth
+  categoryForm.depth = parseInt(props.editData.depth) + 1
   categoryForm.parent_id = props.editData.id
+  categoryName.value = props.prevCategoryName
   if (props.isEdit) {
+    categoryName.value = props.prevCategoryName
     categoryForm.depth = props.editData.depth
     categoryForm.category_name = props.editData.category_name
     categoryForm.status = props.editData.status

src/modules/admin/category/views/List.vue

@@ -5,7 +5,7 @@ import { Operation } from '@element-plus/icons-vue'
 import { getCategoryList, delCategory, createCategory, updateCategory } from '../api'
 import { ElMessage, ElMessageBox } from 'element-plus'
 const loading = ref(false)
-
+const prevCategoryName = ref('')
 const title = ref('')
 const dialogVisible = ref(false)
 let form = reactive({
@@ -30,6 +30,11 @@ const handleEdit = (index: number, row: ICategory) => {
   isEdit.value = true
   dialogVisible.value = true
   editData.value = row
+  if (row.depth > '0') {
+    prevCategoryName.value = getParent(row.id, tableData[0]).category_name
+  } else {
+    prevCategoryName.value = ''
+  }
 }
 // 删除分类
 const handleDelete = (index: number, row: ICategory) => {
@@ -41,19 +46,43 @@ const handleDelete = (index: number, row: ICategory) => {
     })
   })
 }
-// 新增类别
+// 行内新增类别
 const handleAddRow = (index: number, row: ICategory) => {
   isEdit.value = false
   dialogVisible.value = true
   title.value = '新增类别'
   editData.value = row
+  if (row.depth > '0') {
+    prevCategoryName.value = getParent(row.id, tableData[0]).category_name
+  } else {
+    prevCategoryName.value = ''
+  }
 }
+// 外部新增类别
 const handleAddCategory = () => {
   isEdit.value = false
   dialogVisible.value = true
   title.value = '新增类别'
   editData.value = tableData[0]
 }
+// 获取上级类别
+const getParent = (node: string, tree: any) => {
+  let result: any = []
+  function find(node: string, tree: any) {
+    console.log(node, tree[0], 'tree')
+    tree.children.forEach((item: any) => {
+      // console.log(item, 'item000')
+      if (item.id === node) {
+        result.push(tree)
+      }
+      if ('children' in item) {
+        find(node, item)
+      }
+    })
+  }
+  find(node, tree)
+  return result[0]
+}
 
 // const sortable = (className: any, targetName: any) => {
 //   const table = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') as HTMLElement
@@ -84,6 +113,7 @@ const handleCategoryList = () => {
       loading.value = false
     })
 }
+// 确定
 const handleConfirm = (val: any) => {
   console.log(val, 'val')
   if (val.isUpdate === 1) {
@@ -110,6 +140,7 @@ const handleSearch = () => {
   // 调接口
   if (form.category_name) {
     tableData = rebuildData(form.category_name, tableData)
+    console.log(tableData, 'ppp')
   }
 }
 // 重点代码 根据name字段模糊匹配树状结构数据，最后将处理好的数据返回出来
@@ -197,6 +228,7 @@ onMounted(() => {
       :editData="editData"
       :isEdit="isEdit"
       :title="title"
+      :prevCategoryName="prevCategoryName"
     />
   </template>
 </template>

src/modules/system/cover/component/AddDialog.vue

 <script lang="ts" setup>
-// import { getMapList } from '../api'
 import AppUpload from '@/components/base/AppUpload.vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { useMapStore } from '@/stores/map'
 const store = useMapStore()
-
-interface mapList {
-  label: string
-  value: string
-  data_dictionary_id: string
-  sort: string
-  remark: string
-  id: string
-}
 // 封面类型
-let typeList = $ref<mapList[]>([])
+const typeList = store.mapList.filter((item: any) => item.key === 'system_cover_type')[0].values
 // 封面状态
-let statusList = $ref<mapList[]>([])
+const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
+
 const form = reactive({
   title: '',
   status: '1',
@@ -66,15 +57,6 @@ const handleConfirm = () => {
   }
 }
 
-const getMapList = async () => {
-  await store.getMapList()
-  typeList = store.mapList.filter((item: any) => item.key === 'system_cover_type')[0].values
-  statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-}
-const change = () => {
-  console.log(form, statusList)
-}
-
 onMounted(() => {
   if (props.isEdit) {
     form.status = props.editData.status
@@ -82,7 +64,6 @@ onMounted(() => {
     form.type = props.editData.type
     form.title = props.editData.url
   }
-  getMapList()
 })
 </script>
 <template>
@@ -97,7 +78,7 @@ onMounted(() => {
         <AppUpload v-model="form.url" />
       </el-form-item>
       <el-form-item label="状态:" prop="status">
-        <el-radio-group v-model="form.status" @change="change()">
+        <el-radio-group v-model="form.status">
           <el-radio v-for="(item, id) in statusList" :key="id" :label="item.value">{{ item.label }}</el-radio>
         </el-radio-group>
       </el-form-item>

src/modules/system/dictionary/component/AddDialog.vue

 <script lang="ts" setup>
-import type { IMapList } from '../types'
 import { useMapStore } from '@/stores/map'
 import type { FormInstance, FormRules } from 'element-plus'
 
 const store = useMapStore()
+const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
 const ruleFormRef = ref<FormInstance>()
-
 const form = reactive({
   name: '',
   key: '',
   status: '1',
-  remark: '',
+  remark: ''
 })
-let statusList = $ref<IMapList[]>([])
-
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
   key: [{ required: true, message: '请输入字典类型', trigger: 'blur' }]
@@ -59,13 +56,8 @@ const handleConfirm = async (formEl: FormInstance | undefined) => {
     }
   })
 }
-const getMapList = async () => {
-  await store.getMapList()
-  statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-  console.log(statusList, 'statusList')
-}
+
 onMounted(() => {
-  getMapList()
   console.log(props.rowInfo, 'props.rowInfo')
   if (props.isEdit) {
     form.name = props.rowInfo.name
@@ -93,7 +85,7 @@ onMounted(() => {
       <el-form-item label="字典类型:" prop="key">
         <el-input v-model="form.key"></el-input>
       </el-form-item>
-      
+
       <el-form-item label="状态:" prop="status">
         <el-radio-group v-model="form.status">
           <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value">{{ item.label }}</el-radio>

src/modules/system/dictionary/component/ListAddDialog.vue

 <script lang="ts" setup>
-import type { IMapList } from '../types'
 import { useMapStore } from '@/stores/map'
 import type { FormInstance, FormRules } from 'element-plus'
 
 const ruleFormRef = ref<FormInstance>()
 
 const store = useMapStore()
-let statusList = $ref<IMapList[]>([])
+const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
+const editList = store.mapList.filter((item: any) => item.key === 'system_can_edit')[0].values
 
 const form = reactive({
   label: '',
@@ -15,7 +15,8 @@ const form = reactive({
   type: '',
   status: '1',
   remark: '',
-  sort: ''
+  sort: '',
+  can_edit: '1'
 })
 const rules = reactive<FormRules>({
   label: [{ required: true, message: '请输入字典标签', trigger: 'blur' }],
@@ -34,6 +35,14 @@ const props = defineProps({
   editData: {
     type: Object,
     required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  type: {
+    type: String,
+    required: true
   }
 })
 interface Emits {
@@ -63,13 +72,8 @@ const handleConfirm = async (formEl: FormInstance | undefined) => {
     }
   })
 }
-const getMapList = async () => {
-  await store.getMapList()
-  statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-  console.log(statusList, 'statusList')
-}
+
 onMounted(() => {
-  getMapList()
   if (props.isEdit) {
     form.label = props.editData.label
     form.value = props.editData.value
@@ -81,19 +85,19 @@ onMounted(() => {
 })
 </script>
 <template>
-  <el-dialog :model-value="isListAddDialog" draggable :before-close="handleCancel">
+  <el-dialog :model-value="isListAddDialog" draggable :before-close="handleCancel" :title="props.title">
     <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
       <el-form-item label="字典标签:" prop="label">
         <el-input v-model="form.label"></el-input>
       </el-form-item>
       <el-form-item label="字典键值:" prop="value">
-        <el-input v-model="form.value"></el-input>
+        <el-input v-model="form.value" :disabled="form.can_edit === '0'"></el-input>
       </el-form-item>
       <el-form-item label="字典排序:" prop="sort">
         <el-input v-model="form.sort"></el-input>
       </el-form-item>
-      <el-form-item label="字典类型:" prop="type">
-        <el-input v-model="form.type"></el-input>
+      <el-form-item label="字典类型:">
+        <el-input disabled :placeholder="props.type"></el-input>
       </el-form-item>
       <el-form-item label="状态:" prop="status">
         <el-radio-group v-model="form.status">
@@ -103,6 +107,11 @@ onMounted(() => {
       <el-form-item label="备注:" prop="remark">
         <el-input v-model="form.remark" autosize type="textarea" />
       </el-form-item>
+      <el-form-item label="能否编辑:" prop="can_edit">
+        <el-radio-group v-model="form.can_edit">
+          <el-radio v-for="(item, index) in editList" :key="index" :label="item.value">{{ item.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
     </el-form>
     <template #footer>
       <span>

src/modules/system/dictionary/views/List.vue

 <script setup lang="ts">
-import type { IMapList } from '../types'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useMapStore } from '@/stores/map'
 import { getDictionaryList, createDictionary, updateDictionary, delDictionary } from '../api'
 import AddDialog from '../component/AddDialog.vue'
 const store = useMapStore()
+const statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
+
 const router = useRouter()
 const appList = ref()
 const isShowDialog = ref(false) // 新增字典弹框状态
@@ -12,10 +13,8 @@ const isEdit = ref(false) //是否可编辑
 const rowInfo = ref({})
 
 // 状态
-let statusList = $ref<IMapList[]>([])
 //表单每行数据
 const listOptions = $computed(() => {
-  
   return {
     remote: {
       httpRequest: getDictionaryList,
@@ -98,15 +97,12 @@ const handleList = (row: any) => {
   router.push({
     path: '/system/dictionary/rowList',
     query: {
-      id: row.id
+      id: row.id,
+      type: row.key
     }
   })
 }
-const getMapList = async () => {
-  await store.getMapList()
-  statusList = store.mapList.filter((item: any) => item.key === 'system_status')[0].values
-  console.log(statusList, 'statusList')
-}
+
 // 确定
 const handleConfirm = (val: any) => {
   if (val.isUpdate === 1) {
@@ -125,9 +121,6 @@ const handleConfirm = (val: any) => {
     })
   }
 }
-onMounted(() => {
-  getMapList()
-})
 </script>
 
 <template>

src/modules/system/dictionary/views/rowList.vue

@@ -6,8 +6,11 @@ import ListAddDialog from '../component/ListAddDialog.vue'
 const route = useRoute()
 const appList = ref()
 const editData = ref({})
+const title = ref('')
+const type = route.query.type as string
 const isEdit = ref(false)
 const isListAddDialog = ref(false)
+
 const listOptions = {
   remote: {
     httpRequest: getDictionaryItemList,
@@ -32,12 +35,14 @@ const handleAdd = () => {
   isListAddDialog.value = true
   isEdit.value = false
   editData.value = {}
+  title.value = '新增数据'
   console.log('新增字典')
 }
 const handleEdit = (row: any) => {
   isEdit.value = true
   editData.value = row
   isListAddDialog.value = true
+  title.value = '修改数据'
   console.log('编辑字典', row)
 }
 const handleDelete = (row: any) => {
@@ -90,6 +95,8 @@ const handleConfirm = (val: any) => {
       @confirm="handleConfirm"
       :editData="editData"
       :isEdit="isEdit"
+      :title="title"
+      :type="type"
     />
   </template>
 </template>