refactor(dept/index.vue): 优化部门写法和一些控制台警告

src/api/system/dept.ts

@@ -1,6 +1,11 @@
 import request from '@/utils/request'
 
-export const listDept = (queryParams?: object) => {
+/**
+ * 部门树形表格
+ *
+ * @param queryParams
+ */
+export function listDeptTable(queryParams?: object) {
     return request({
         url: '/youlai-admin/api/v1/depts/table',
         method: 'get',
@@ -8,22 +13,35 @@ export const listDept = (queryParams?: object) => {
     })
 }
 
-export const getDept = (id: any) => {
+/**
+ * 部门下拉列表
+ */
+export function listDeptSelect() {
     return request({
-        url: '/youlai-admin/api/v1/depts/'+id,
+        url: '/youlai-admin/api/v1/depts/select',
         method: 'get'
     })
 }
 
-export const delDept = (id: any) => {
+/**
+ * 获取部门详情
+ *
+ * @param id
+ */
+export function getDeptDetail(id: any) {
     return request({
-        url: '/youlai-admin/api/v1/depts/'+id,
+        url: '/youlai-admin/api/v1/depts/' + id,
-        method: 'delete',
+        method: 'get'
     })
 }
 
-// 新增部门
+
-export const addDept = (data: any) => {
+/**
+ * 新增部门
+ *
+ * @param data
+ */
+export function addDept(data: any) {
     return request({
         url: '/youlai-admin/api/v1/depts',
         method: 'post',
@@ -31,19 +49,29 @@ export const addDept = (data: any) => {
     })
 }
 
-// 修改部门
+/**
-export const updateDept = (id:number,data: any) => {
+ *  修改部门
+ *
+ * @param id
+ * @param data
+ */
+export function updateDept(id: number, data: any) {
     return request({
-        url: '/youlai-admin/api/v1/depts/'+id,
+        url: '/youlai-admin/api/v1/depts/' + id,
         method: 'put',
         data: data
     })
 }
 
-
+/**
-export const listDeptsForSelect = ()=> {
+ * 删除部门
+ *
+ * @param id
+ */
+export function deleteDept(id: any) {
     return request({
-        url: '/youlai-admin/api/v1/depts/select',
+        url: '/youlai-admin/api/v1/depts/' + id,
-        method: 'get'
+        method: 'delete',
     })
 }
+

src/components/TreeSelect/index.vue

@@ -29,8 +29,9 @@
 </template>
 
 <script setup>
-import {ref, getCurrentInstance ,nextTick,onMounted,computed,watch} from "vue";
+import {ref, getCurrentInstance, nextTick, onMounted, computed, watch} from "vue";
-const { proxy } = getCurrentInstance();
+
+const {proxy} = getCurrentInstance();
 
 const state = defineProps({
   // 配置项
@@ -53,13 +54,13 @@ const state = defineProps({
   },
   // v-model 绑定的值
   modelValue: {
-    type: Object,
+    type: [String, Number],
     default: ''
   },
   // 数据源
   options: {
     type: Array,
-    default:[]
+    default: []
   },
   // 提示文字
   placeholder: {
@@ -72,7 +73,6 @@ const emit = defineEmits(['update:modelValue']);
 
 const modelValue = computed({
   get: () => {
-    console.log('heihei',state.modelValue)
     return state.modelValue
   },
   set: (val) => {
@@ -84,21 +84,22 @@ const defaultExpandedKey = ref([]);
 
 function initHandle() {
   nextTick(() => {
-    console.log("selectedValue1",modelValue)
+    console.log("selectedValue1", modelValue)
     const selectedValue = modelValue.value;
-    console.log("selectedValue",modelValue.value)
+    console.log("selectedValue", modelValue.value)
-    if(selectedValue !== null && typeof (selectedValue) !== "undefined"){
+    if (selectedValue !== null && typeof (selectedValue) !== "undefined") {
       const node = proxy.$refs.selectTree.getNode(selectedValue)
       if (node) {
         valueTitle.value = node.data[state.props.label]
         proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
         defaultExpandedKey.value = [selectedValue] // 设置默认展开
-      }else{
+      } else {
         clearHandle()
       }
     }
   })
 }
+
 function handleNodeClick(node) {
   valueTitle.value = node[state.props.label]
   modelValue.value = node[state.props.value];
@@ -129,7 +130,7 @@ function clearSelected() {
 }
 
 onMounted(() => {
-  console.log('hah',modelValue)
+  console.log('hah', modelValue)
   initHandle()
 })
 
@@ -149,7 +150,7 @@ watch(modelValue, () => {
   font-weight: normal;
 }
 
-ul li  .el-tree .el-tree-node__content {
+ul li .el-tree .el-tree-node__content {
   height: auto;
   padding: 0 20px;
   box-sizing: border-box;
@@ -158,7 +159,7 @@ ul li  .el-tree .el-tree-node__content {
 :deep(.el-tree-node__content:hover),
 :deep(.el-tree-node__content:active),
 :deep(.is-current > div:first-child),
-:deep( .el-tree-node__content:focus ){
+:deep( .el-tree-node__content:focus ) {
   background-color: mix(#fff, #409EFF, 90%);
   color: #409EFF;
 }

src/views/dashboard/index.vue

@@ -173,7 +173,7 @@
                         <div style="padding: 6px;">
                           <span>Mr.</span>
                           <div class="bottom clearfix" style="margin-top: 5px">
-                            <el-tag type="primary" size="mini">后端</el-tag>
+                            <el-tag  size="mini">后端</el-tag>
                             <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
                             <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
                           </div>

src/views/oms/order/index.vue

@@ -124,90 +124,6 @@
         v-model:limit="queryParams.pageSize"
         @pagination="handleQuery"
     />
-
-
-    <!-- 订单详情弹窗 -->
-    <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="800"
-        top="5vh"
-    >
-      <section
-          ref="print"
-      >
-        <el-form
-            :data="orderDetail"
-            label-position="left"
-        >
-          <el-form-item label="订单编号">
-            <span>{{ orderDetail.order.orderSn }}</span>
-          </el-form-item>
-          <el-form-item label="订单状态">
-            <el-tag>{{ orderDetail.order.status | orderStatusFilter }}</el-tag>
-          </el-form-item>
-          <el-form-item label="订单用户">
-            <span>{{ orderDetail.member.nickname }}</span>
-          </el-form-item>
-          <el-form-item label="买家留言">
-            <span>{{ orderDetail.order.message }}</span>
-          </el-form-item>
-          <el-form-item label="收货信息">
-            <span>（收货人）{{ orderDetail.order.consignee }}</span>
-            <span>（手机号）{{ orderDetail.order.mobile }}</span>
-            <span>（地址）{{ orderDetail.order.address }}</span>
-          </el-form-item>
-          <el-form-item label="商品信息">
-            <el-table :data="orderDetail.orderItems" border fit highlight-current-row>
-              <el-table-column align="center" label="商品名称" prop="spuName"/>
-              <el-table-column align="center" label="货品规格" prop="skuspecs"/>
-              <el-table-column align="center" label="货品价格" prop="skuPrice"/>
-              <el-table-column align="center" label="货品数量" prop="skuQuantity"/>
-              <el-table-column align="center" label="货品图片" prop="skuPic">
-                <template slot-scope="scope">
-                  <img :src="scope.row.skuPic" width="40">
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-form-item>
-          <el-form-item label="费用信息">
-            <span>
-              (订单费用){{ orderDetail.order.orderPrice }}元 =
-              (商品总价){{ orderDetail.order.skuPrice }}元 +
-              (快递费用){{ orderDetail.order.freightPrice }}元 -
-              (优惠减免){{ orderDetail.order.couponPrice }}元 -
-              (积分减免){{ orderDetail.order.integralPrice }}元
-            </span>
-          </el-form-item>
-          <el-form-item label="支付信息">
-            <span>（支付渠道）{{ orderDetail.order.payChannel | payTypeFilter }}</span>
-            <span>（支付时间）{{ orderDetail.order.gmtPay }}</span>
-          </el-form-item>
-          <el-form-item label="快递信息">
-            <span>（物流渠道）{{ orderDetail.order.shipChannel }}</span>
-            <span>（物流单号）{{ orderDetail.order.shipSn }}</span>
-            <span>（发货时间）{{ orderDetail.order.gmtDelivery }}</span>
-          </el-form-item>
-          <el-form-item label="退款信息">
-            <span>（退款金额）{{ orderDetail.order.refundAmount }}元</span>
-            <span>（退款类型）{{ orderDetail.order.refundType }}</span>
-            <span>（退款备注）{{ orderDetail.order.refundNote }}</span>
-            <span>（退款时间）{{ orderDetail.order.gmtRefund }}</span>
-          </el-form-item>
-          <el-form-item label="收货信息">
-            <span>（确认收货时间）{{ orderDetail.order.confirmTime }}</span>
-          </el-form-item>
-        </el-form>
-      </section>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-
   </div>
 </template>
 
@@ -266,7 +182,24 @@ const state = reactive({
   },
   dialogVisible: false,
   orderDetail: {
-    order: {},
+    order: {
+      refundAmount: undefined,
+      refundType: undefined,
+      refundNote: undefined,
+      gmtRefund: undefined,
+      confirmTime: undefined,
+      gmtDelivery: undefined,
+      shipSn: undefined,
+      shipChannel: undefined,
+      gmtPay: undefined,
+      integralPrice: undefined,
+      payChannel: undefined,
+      skuPrice : undefined,
+      couponPrice: undefined,
+      freightPrice: undefined,
+      orderPrice : undefined,
+      couponPrice: undefined,
+    },
     member: {},
     orderItems: []
   },

src/views/system/dept/index.vue

@@ -4,9 +4,8 @@
     <el-form
         size="mini"
         :model="queryParams"
-        ref="queryForm"
+        ref="queryFormRef"
         :inline="true"
-        v-show="showSearch"
     >
       <el-form-item>
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
@@ -30,12 +29,8 @@
             clearable
             size="small"
         >
-          <el-option
+          <el-option :value="1" label="正常"/>
-              v-for="dict in statusOptions"
+          <el-option :value="0" label="禁用"/>
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -116,15 +111,14 @@
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog
-        :title="title"
+        :title="dialog.title"
-        v-model="open"
+        v-model="dialog.visible"
         width="600px"
-        @open="dialogshow"
         @closed="cancel"
     >
       <el-form
-          ref="formDialog"
+          ref="dataFormRef"
-          :model="formVal"
+          :model="formData"
           :rules="rules"
           label-width="80px"
       >
@@ -135,17 +129,17 @@
           <tree-select
               :options="deptOptions"
               placeholder="选择上级部门"
-              v-model="formVal.parentId"
+              v-model="formData.parentId"
           />
         </el-form-item>
         <el-form-item label="部门名称" prop="name">
-          <el-input v-model="formVal.name" placeholder="请输入部门名称"/>
+          <el-input v-model="formData.name" placeholder="请输入部门名称"/>
         </el-form-item>
         <el-form-item label="显示排序" prop="sort">
-          <el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
+          <el-input-number v-model="formData.sort" controls-position="right" style="width: 100px" :min="0"/>
         </el-form-item>
         <el-form-item label="部门状态">
-          <el-radio-group v-model="formVal.status">
+          <el-radio-group v-model="formData.status">
             <el-radio :label="1">正常</el-radio>
             <el-radio :label="0">禁用</el-radio>
           </el-radio-group>
@@ -153,13 +147,10 @@
       </el-form>
 
       <template #footer>
-        <div
+        <div class="dialog-footer">
-            class="dialog-footer"
-        >
           <el-button
               type="primary"
-              @click="submitForm"
+              @click="submitForm">
-          >
             确 定
           </el-button>
           <el-button @click="cancel">
@@ -174,62 +165,45 @@
 <script setup lang="ts">
 import {onMounted, reactive, unref, ref, toRefs} from 'vue'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import {listDept, getDept, delDept, updateDept, addDept, listDeptsForSelect} from '@/api/system/dept'
+import {listDeptTable, getDeptDetail, deleteDept, updateDept, addDept, listDeptSelect} from '@/api/system/dept'
 import TreeSelect from '@/components/TreeSelect/Index.vue'
 import {ElForm, ElMessage, ElMessageBox} from 'element-plus'
+import {getUserFormDetail} from "@api/system/user";
+
+const queryFormRef = ref(ElForm)
+const dataFormRef = ref(ElForm)
 
 
-const dataMap = reactive({
+const state = reactive({
   // 选中ID数组
   ids: [],
   // 非单个禁用
   single: true,
-  // 非多个禁用
-  multiple: true,
   disabled: false,
-  isAdd: false,
   originOptions: [],
-  props: { // 配置项（必选）
-    value: 'id',
-    label: 'label',
-    children: 'children'
-  },
   loading: true,
-  // 显示搜索条件
-  showSearch: true,
   // 表格树数据
   deptList: [],
   // 部门树选项
   deptOptions: [],
-  // 弹出层标题
+  // 弹窗属性
-  title: '',
+  dialog: {
-  // 是否显示弹出层
+    title: '',
-  open: false,
+    visible: false
-  // 状态数据字典
+  },
-  statusOptions: [
-    {
-      "dictValue": 0,
-      "dictLabel": "禁用"
-    },
-    {
-      "dictValue": 1,
-      "dictLabel": "正常"
-    }
-  ],
   // 查询参数
   queryParams: {
     name: undefined,
     status: undefined
   },
-  formVal: {
+  // 表单数据
-    id: '',
+  formData: {
+    id: undefined,
     parentId: '',
     name: '',
     sort: 1,
-    status: ''
+    status:  1
   },
-
-  deptidfix: 1,
   // 表单参数校验
   rules: {
     parentId: [
@@ -243,150 +217,146 @@ const dataMap = reactive({
     ]
   }
 })
-const queryForm = ref(ElForm)
+
-const formDialog = ref(ElForm)
+
+const {ids, single, disabled, loading, deptList, deptOptions, queryParams, formData, rules, dialog} = toRefs(state)
 
 
 /**
- * 删除按钮
+ * 部门查询
- * */
+ */
-function handleSelectionChange(selection: any) {
+function handleQuery() {
-  dataMap.ids = selection.map((item: any) => item.id)
+  state.loading = true
-  dataMap.single = selection.length === 0
+  listDeptTable(state.queryParams).then((response: any) => {
-}
+    state.deptList = response.data
-
+    state.loading = false
-/** 查询部门列表 */
-function getList() {
-  dataMap.loading = true
-  listDept(dataMap.queryParams).then((response: any) => {
-    dataMap.deptList = response.data
-    dataMap.loading = false
   })
 }
 
-// 取消按钮
+/**
-function cancel() {
+ * 重置查询
-  dataMap.open = false
+ */
-  dataMap.isAdd = false
-  dataMap.formVal = {
-    id: '',
-    parentId: '',
-    name: '',
-    sort: 1,
-    status: ''
-  }
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  getList()
-}
-
-/** 重置按钮操作 */
 function resetQuery() {
-  const form = unref(queryForm)
+  const queryForm = unref(queryFormRef)
-  form.resetFields()
+  queryForm.resetFields()
   handleQuery()
 }
 
-/** 查询部门下拉树结构 */
+function handleSelectionChange(selection: any) {
-function getTreeselect() {
+  state.ids = selection.map((item: any) => item.id)
-  listDeptsForSelect().then(response => {
+  state.single = selection.length === 0
-    dataMap.deptOptions = response.data
+}
+
+
+/**
+ * 加载部门下拉数据源
+ */
+async function loadDeptOptions() {
+  const deptOptions: any[] = []
+  listDeptSelect().then(response => {
+    const rootDeptOption = {id: 0, label: '顶级部门', children: response.data}
+    deptOptions.push(rootDeptOption)
+    state.deptOptions = deptOptions
   })
 }
 
-function handleAdd(row: any) {
+/**
-  dataMap.isAdd = true
+ * 表单重置
-  if (row.id) {
+ **/
-    dataMap.formVal.parentId = row.id.toString()
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    parentId: '',
+    name: '',
+    sort: 1,
+    status:  1
   }
-  dataMap.open = true
-  dataMap.title = '添加部门'
 }
 
-/** 修改按钮操作 */
+/**
+ * 添加部门
+ */
+function handleAdd() {
+  resetForm()
+  loadDeptOptions()
+  state.dialog = {
+    title: '添加部门',
+    visible: true
+  }
+}
+
+/**
+ * 修改部门
+ */
 async function handleUpdate(row: any) {
-  dataMap.disabled = true
+  await loadDeptOptions()
-  dataMap.isAdd = false
+  const deptId = row.id || state.ids
-  dataMap.deptidfix = row.id
+  state.dialog = {
-  try {
+    title: '修改部门',
-    const result = await getDept(row.id) as any
+    visible: true
-    dataMap.formVal = result.data
-    dataMap.title = '修改部门'
-    dataMap.open = true
-  } catch (e) {
-    console.log("获取部门数据失败")
   }
-
+  getDeptDetail(deptId).then((response: any) => {
+    state.formData = response.data
+  })
 }
 
-/** 提交按钮 */
+/**
+ * 部门表单提交
+ */
 function submitForm() {
-  const formNode = unref(formDialog)
+  const dataForm = unref(dataFormRef)
-  formNode.validate((valid: any) => {
+  dataForm.validate((valid: any) => {
+
     if (valid) {
-      if (!dataMap.isAdd) {
+      if (state.formData.id) {
-        updateDept(dataMap.deptidfix, dataMap.formVal).then((res: any) => {
+        updateDept(state.formData.id, state.formData).then((res: any) => {
           ElMessage.success('修改成功')
-          dataMap.open = false
+          state.dialog.visible = false
-          getList()
+          handleQuery()
         })
       } else {
-        addDept(dataMap.formVal).then((res: any) => {
+        addDept(state.formData).then(() => {
           ElMessage.success('新增成功')
-          dataMap.open = false
+          state.dialog.visible = false
-          getList()
+          handleQuery()
         })
       }
     }
   })
 }
 
-/** 删除按钮操作 */
+/**
-async function handleDelete(row: any) {
+ * 删除部门
-  const ids = [row.id || dataMap.ids].join(',')
+ *
+ * @param row
+ */
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',')
   ElMessageBox.confirm(`确认删除已选中的数据项?`, '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    delDept(ids).then(rps => {
+    deleteDept(ids).then(() => {
-      getList()
+      handleQuery()
       ElMessage.success('删除成功')
-    }).catch(e => {
+    }).catch(()=> {
-      console.log(`删除失败:${e}`)
+      console.log(`删除失败`)
     })
   }).catch(() =>
       ElMessage.info('已取消删除')
   )
 }
 
-function dialogshow() {
+/**
-  getTreeselect()
+ * 取消/关闭弹窗
+ **/
+function cancel() {
+  resetForm()
+  state.dialog.visible = false
 }
 
-const {
-  ids, single,
-  multiple,
-  disabled,
-  isAdd,
-  originOptions, props, loading,
-  // 显示搜索条件
-  showSearch,
-  // 表格树数据
-  deptList,
-  // 部门树选项
-  deptOptions,
-  // 弹出层标题
-  title,
-  // 是否显示弹出层
-  open, statusOptions, queryParams, formVal, deptidfix, rules
-} = toRefs(dataMap)
-
 onMounted(() => {
-  getList()
+  handleQuery()
-  getTreeselect()
 })
-
 </script>

src/views/system/user/index.vue

@@ -334,7 +334,7 @@
                   placeholder="请选择"
               >
                 <el-option
-                    v-for="item in roleOptions"
+                    v-for="item  in roleOptions"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
@@ -386,7 +386,7 @@ import {reactive, ref, unref, watchEffect, onMounted, getCurrentInstance, toRefs
 
 // API依赖
 import {listUsersWithPage, getUserFormDetail, deleteUsers, addUser, updateUser, updateUserPart} from '@/api/system/user'
-import {listDeptsForSelect} from '@/api/system/dept'
+import {listDeptSelect} from '@/api/system/dept'
 import {listRoles} from '@/api/system/role'
 
 // 组件依赖
@@ -421,9 +421,9 @@ const state = reactive({
   // 部门名称
   deptName: '',
   // 性别状态字典
-  genderOptions: [],
+  genderOptions: [] as any[],
   // 角色选项
-  roleOptions: [],
+  roleOptions: [] as any[],
   // 表单参数
   formData: {
     id: undefined,
@@ -496,7 +496,7 @@ const {
  * 加载部门数据
  **/
 async function loadDeptOptions() {
-  listDeptsForSelect().then(response => {
+  listDeptSelect().then(response => {
     state.deptOptions = response.data
   })
 }
@@ -577,7 +577,7 @@ function resetPassword(row: { [key: string]: any }) {
 }
 
 /**
- *  用户查询
+ * 用户查询
  **/
 function handleQuery() {
   state.loading = true
@@ -628,7 +628,7 @@ async function handleUpdate(row: { [key: string]: any }) {
   await loadDeptOptions()
   await loadRoleOptions()
   state.dialog = {
-    title: '添加用户',
+    title: '修改用户',
     visible: true
   }
   getUserFormDetail(userId).then((response: any) => {
@@ -636,25 +636,6 @@ async function handleUpdate(row: { [key: string]: any }) {
   })
 }
 
-/**
- * 表单重置
- **/
-function resetForm() {
-  state.formData = {
-    id: undefined,
-    deptId: undefined,
-    username: undefined,
-    nickname: undefined,
-    password: '',
-    mobile: undefined,
-    email: undefined,
-    gender: undefined,
-    status: 1,
-    remark: undefined,
-    roleIds: []
-  }
-}
-
 
 /**
  * 表单提交
@@ -681,7 +662,30 @@ function submitForm() {
   })
 }
 
-/** 删除按钮操作 */
+
+/**
+ * 表单重置
+ **/
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    deptId: undefined,
+    username: undefined,
+    nickname: undefined,
+    password: '',
+    mobile: undefined,
+    email: undefined,
+    gender: undefined,
+    status: 1,
+    remark: undefined,
+    roleIds: []
+  }
+}
+
+
+/**
+ * 删除用户
+ **/
 function handleDelete(row: { [key: string]: any }) {
   const userIds = row.id || state.ids.join(',')
   ElMessageBox.confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {

tsconfig.json

@@ -13,7 +13,7 @@
 
     "baseUrl": "./",
     "paths": {
-      "@*": ["src/*"],
+      "@*": ["src/*"]
     },
     "extends": "./tsconfig.extends.json",
     "skipLibCheck": true,  // element-plus 生产打包报错，通过此配置修改 TS 不对第三方依赖类型检查