页面优化调整，审核调整

src/api/product.js

@@ -63,6 +63,15 @@ export function createProductCate(data) {
   })
 }
 
+// 设备分类数据回显
+export function fetchAuthProductFormData(params) {
+  return request({
+    url: '/auth/product/type/form/data',
+    method: 'get',
+    params
+  })
+}
+
 // 获取设备分类列表
 export function fetchProductCateList(params) {
   return request({

src/router/module/admin/audit.js

@@ -149,6 +149,12 @@ const deviceAuditRoutes = [
     component: () => import('@/views/admin/audit/device/list'),
     name: 'AuditDeviceCateList',
     meta: { title: '设备管理审核', noCache: true }
+  },
+  {
+    path: 'device/cate-detail',
+    component: () => import('@/views/admin/audit/device/review'),
+    name: 'AuditDeviceCateDetail',
+    meta: { title: '设备管理审核详情', noCache: true }
   }
 ]
 

src/router/module/normal/club.js

@@ -64,9 +64,15 @@ const clubRoutes = [
       },
       {
         path: 'device-cate',
-        component: () => import('@/views/normal/club/device-cate'),
+        component: () => import('@/views/normal/club/cate/index'),
         name: 'ClubDeviceCate',
         meta: { title: '设备管理', noCache: true }
+      },
+      {
+        path: 'device-cate-edit',
+        component: () => import('@/views/normal/club/cate/edit'),
+        name: 'ClubDeviceCateEdit',
+        meta: { title: '设备编辑', noCache: true }
       }
     ]
   }

src/styles/index.scss

@@ -355,3 +355,27 @@ aside {
   font-size: 14px;
   color: #999;
 }
+
+.page-info-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  padding: 40px 0;
+  color: #333;
+}
+
+.page-form-container {
+  width: 666px;
+  margin: 0 auto;
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.control-box {
+  padding-top: 30px;
+  text-align: center;
+  .el-button {
+    width: 120px;
+    margin: 0 8px;
+  }
+}

src/views/admin/audit/club/device/review.vue

@@ -22,10 +22,10 @@
         </div>
       </div>
 
-      <div class="row">
+      <!-- <div class="row">
         <div class="col">所属品牌：</div>
         <div class="col">{{ productInfo.brandName }}</div>
-      </div>
+      </div> -->
 
       <div class="row">
         <div class="col">购买渠道：</div>
@@ -42,7 +42,7 @@
           />
         </div>
       </div>
-      <div class="row">
+      <!-- <div class="row">
         <div class="col">设备参数：</div>
         <div class="col">
           <template v-for="(param, index) in productInfo.paramList">
@@ -53,6 +53,8 @@
           </template>
         </div>
       </div>
+      -->
+
       <el-form v-if="type === 'audit'" ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
         <el-form-item label="审核：">
           <el-radio-group v-model="auditForm.auditStatus">

src/views/admin/audit/device/list.vue

@@ -55,52 +55,16 @@
         </template>
       </el-table-column>
     </el-table>
-
-    <!-- 审核对话框 -->
-    <el-dialog :title="editTitle" :visible.sync="dialogVisible" width="30%" @closed="onDialogClose">
-      <el-form label-width="80px">
-        <el-form-item label="设备名称:">
-          <span v-text="currentData.name" />
-        </el-form-item>
-        <el-form-item label="设备图片:">
-          <el-image style="width: 200px; height: 200px" :src="currentData.image" :preview-src-list="srcList" />
-        </el-form-item>
-        <template v-if="type === 'audit'">
-          <el-form-item label="审核状态:">
-            <el-radio-group v-model="dialogData.auditStatus">
-              <el-radio :label="1">通过</el-radio>
-              <el-radio :label="0">不通过</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="dialogData.auditStatus === 0" label="原因：" prop="invalidReason">
-            <el-input v-model="dialogData.invalidReason" type="textarea" placeholder="请说明原因" />
-          </el-form-item>
-        </template>
-      </el-form>
-      <template v-if="type === 'audit'">
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="handleAuditStatus">保存</el-button>
-        </span>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { auditProductCate, fetchProductCateList } from '@/api/product'
+import { fetchProductCateList } from '@/api/product'
 import { mapGetters } from 'vuex'
-const resetDialogData = () => ({
-  auditBy: '', // 审核人id
-  productTypeId: '', // 机构id
-  auditStatus: 1, // 审核状态
-  invalidReason: '' // 审核信息
-})
+
 export default {
   data() {
     return {
-      type: 'review',
-      dialogVisible: false,
       listLoading: false,
       listQuery: {
         authUserId: '',
@@ -113,16 +77,11 @@ export default {
       },
       list: [],
       total: 0,
-      currentData: {},
-      dialogData: resetDialogData(),
       srcList: [] // 预览图片列表
     }
   },
   computed: {
-    ...mapGetters(['authUserId']),
-    editTitle() {
-      return this.type === 'review' ? '查看' : '审核'
-    }
+    ...mapGetters(['authUserId'])
   },
   created() {
     this.getList()
@@ -141,8 +100,7 @@ export default {
     // 预览
     onReview(row) {
       console.log('预览')
-      this.type = 'review'
-      this.handleAudit(row)
+      this.$router.push(`/audit/device/cate-detail?id=${row.productTypeId}&type=review`)
     },
     // 驳回
     onResult(row) {
@@ -150,8 +108,8 @@ export default {
     },
     // 审核
     onAudit(row) {
-      this.type = 'audit'
-      this.handleAudit(row)
+      console.log('审核')
+      this.$router.push(`/audit/device/cate-detail?id=${row.productTypeId}&type=audit`)
     },
     async getList() {
       try {
@@ -163,44 +121,9 @@ export default {
         console.log(error)
       }
     },
-    // 审核设备分类
-    handleAudit(row) {
-      this.currentData = row
-      this.srcList.push(row.image)
-      this.dialogVisible = true
-    },
-    // 审核
-    async handleAuditStatus() {
-      this.dialogData.auditBy = this.authUserId
-      this.dialogData.productTypeId = this.currentData.productTypeId
-      try {
-        const res = await auditProductCate(this.dialogData)
-        this.$message.success(res.data)
-        this.getList()
-        this.dialogVisible = false
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    // 对话框关闭事件
-    onDialogClose() {
-      this.dialogData = resetDialogData()
-      this.currentData = {}
-      this.srcList = []
-    },
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-.app-container {
-  ::v-deep {
-    .el-dialog__body {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>

src/views/admin/audit/device/review.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="page-form-container cate-review">
+    <div class="row">
+      <div class="col">设备名称：</div>
+      <div class="col">{{ cateData.name }}</div>
+    </div>
+    <div class="row">
+      <div class="col">设备图片：</div>
+      <div class="col">
+        <el-image style="width: 120px; height: 120px" :src="cateData.image" :preview-src-list="[cateData.image]" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">所属品牌：</div>
+      <div class="col">{{ cateData.brandName }}</div>
+    </div>
+    <div class="row">
+      <div class="col">相关参数：</div>
+      <div class="col">
+        <template v-for="(param, index) in cateData.paramList">
+          <div :key="index" class="param">
+            <div class="label">{{ param.paramName }}：</div>
+            <div class="content">{{ param.paramContent }}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <el-form v-if="type === 'audit'" ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
+      <el-form-item label="审核：">
+        <el-radio-group v-model="auditForm.auditStatus">
+          <el-radio :label="1">通过</el-radio>
+          <el-radio :label="0">不通过</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="auditForm.auditStatus === 0" label="原因：" prop="invalidReason">
+        <el-input v-model="auditForm.invalidReason" type="textarea" :rows="3" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="info" @click="$_back">返回</el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { auditProductCate, fetchAuthProductFormData } from '@/api/product'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      type: 'review',
+      isLoading: false,
+      auditForm: {
+        auditBy: '', // 审核人id
+        productTypeId: '', // 机构id
+        auditStatus: 1, // 审核状态
+        invalidReason: '' // 审核信息
+      },
+      rules: {
+        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      },
+      cateData: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.type = this.$route.query.type
+    this.getDetail()
+  },
+  methods: {
+    // 数据回显
+    async getDetail() {
+      this.auditForm.productTypeId = this.$route.query.id
+      // getAuthFormData({ authId: this.auditForm.authId }).then((res) => {
+      //   this.clubInfo = { ...this.clubInfo, ...res.data }
+      // })
+      try {
+        const { data } = await fetchAuthProductFormData({ productTypeId: this.auditForm.productTypeId })
+        this.cateData = data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async onAudit() {
+      this.isLoading = true
+      this.auditForm.auditBy = this.authUserId
+      try {
+        const res = await auditProductCate(this.auditForm)
+        this.$message.success(res.data)
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.back()
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+    // 提交审核信息
+    async submit() {
+      try {
+        await this.$refs.auditForm.validate()
+        await this.onAudit()
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-bottom: 25px;
+  .col {
+    font-size: 14px;
+    color: #333;
+    &:first-child {
+      min-width: 100px;
+      text-align: right;
+      margin-right: 8px;
+      font-weight: bold;
+      color: #666;
+    }
+
+    .param {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      // grid-template-rows: repeat(2, 1fr);
+      grid-column-gap: 0px;
+      grid-row-gap: 0px;
+
+      div {
+        padding-bottom: 16px;
+        text-align: left;
+
+        &:first-child {
+          text-align: right;
+        }
+      }
+    }
+
+    .el-image {
+      margin-left: 12px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.el-button {
+  width: 120px;
+}
+</style>

src/views/admin/member/handsel.vue

@@ -313,14 +313,5 @@ export default {
   .section {
     min-height: 600px;
   }
-
-  .control-box {
-    margin: 40px 0;
-    text-align: center;
-    .el-button {
-      width: 140px;
-      margin: 0 8px;
-    }
-  }
 }
 </style>

src/views/admin/member/service.vue

@@ -88,13 +88,5 @@ export default {
       color: #f56c6c;
     }
   }
-  .control-box {
-    margin: 40px 0;
-    text-align: center;
-    .el-button {
-      width: 140px;
-      margin: 0 8px;
-    }
-  }
 }
 </style>

src/views/admin/member/settings/combo-edit.vue

@@ -176,14 +176,6 @@ export default {
 .list {
   margin-bottom: 60px;
 }
-.control-box {
-  margin: 40px 0;
-  text-align: center;
-  .el-button {
-    width: 140px;
-    margin: 0 8px;
-  }
-}
 .section {
   margin: 24px 0;
   margin-left: 32px;

src/views/admin/settings/accounts/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container menus-edit">
+  <div class="page-form-container">
     <el-form ref="userInfoFormRef" label-width="100px" :model="userInfo" :rules="rules">
       <!-- <el-form-item label="用户头像：">
         <el-input v-show="false" v-model="user.avatar" />
@@ -152,19 +152,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.menus-edit {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 100px;
-}
-.control-box {
-  margin: 20px 0;
-  text-align: center;
-  .el-button {
-    width: 120px;
-    margin: 0 8px;
-  }
-}
-</style>

src/views/admin/settings/roles/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container roles-edit">
+  <div class="page-form-container">
     <el-form ref="ruleRef" label-width="100px" :model="role" :rules="rules">
       <el-form-item label="角色名称：" prop="roleName">
         <el-input v-model="role.roleName" placeholder="角色名称" maxlength="20" />
@@ -20,14 +20,12 @@
           @check-change="getCheckedKeys"
         />
       </el-form-item>
-      <el-form-item>
-        <!-- 确认 取消 -->
-        <div class="control-box">
-          <el-button type="warning" @click="$_back">返回</el-button>
-          <el-button type="primary" @click="handleSubmit">保存</el-button>
-        </div>
-      </el-form-item>
     </el-form>
+    <!-- 确认 取消 -->
+    <div class="control-box">
+      <el-button type="warning" @click="$_back">返回</el-button>
+      <el-button type="primary" @click="handleSubmit">保存</el-button>
+    </div>
   </div>
 </template>
 
@@ -68,11 +66,14 @@ export default {
     },
     getCheckedKeys() {
       // console.log(this.$refs.tree.getCheckedNodes(false, true).map(item => item.id))
-      this.role.menuIds = this.$refs.tree.getCheckedNodes(false, true).map(item => item.id).join(',')
+      this.role.menuIds = this.$refs.tree
+        .getCheckedNodes(false, true)
+        .map((item) => item.id)
+        .join(',')
     },
     // 获取菜单权限列表
     getMenuTree() {
-      sysMenuTree({ menuType: 1 }).then(res => {
+      sysMenuTree({ menuType: 1 }).then((res) => {
         this.menuTree = res.data
       })
     },
@@ -88,14 +89,14 @@ export default {
     },
     // 获取角色信息
     fetchRoleInfo() {
-      getRole(this.role.id).then(res => {
+      getRole(this.role.id).then((res) => {
         console.log(res.data)
         this.setRoleInfo(res.data)
       })
     },
     // 修改角色
     updateRole() {
-      updateRole(this.role.id, this.role).then(res => {
+      updateRole(this.role.id, this.role).then((res) => {
         console.log(res)
         this.$message.success('修改角色成功')
         this.$store.dispatch('tagsView/delView', this.$route)
@@ -104,7 +105,7 @@ export default {
     },
     // 创建角色
     createRole() {
-      createRole(this.role).then(res => {
+      createRole(this.role).then((res) => {
         console.log(res)
         this.$message.success('添加角色成功')
         this.$store.dispatch('tagsView/delView', this.$route)
@@ -113,7 +114,7 @@ export default {
     },
     // 提交
     handleSubmit() {
-      this.$refs.ruleRef.validate(valide => {
+      this.$refs.ruleRef.validate((valide) => {
         if (!valide) return
         if (this.editType === 'add') {
           this.createRole()
@@ -125,19 +126,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.roles-edit {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 40px;
-}
-.control-box {
-  margin: 20px 0;
-  text-align: center;
-  .el-button {
-    width: 120px;
-    margin: 0 8px;
-  }
-}
-</style>

src/views/admin/supplier/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="isLoading" class="addSupplier">
+  <div v-loading="isLoading" class="page-form-container">
     <el-form ref="submitFormRef" :model="submitForm" :rules="formDataRules" label-width="120px" class="addForm">
       <el-form-item label="供应商类型:" prop="shopType">
         <el-select
@@ -162,7 +162,7 @@
         </el-select>
       </el-form-item>
     </el-form>
-    <div class="submit-btn">
+    <div class="control-box">
       <el-button type="primary" @click="submit">保存</el-button>
       <el-button type="warning" @click="$_back()">返回</el-button>
     </div>
@@ -815,13 +815,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.addSupplier {
-  margin-bottom: 80px;
-}
 .addForm {
-  width: 500px;
-  margin: 0 auto;
-  margin-top: 80px;
   .brand-list {
     .el-tag {
       margin-right: 5px;
@@ -829,13 +823,4 @@ export default {
     }
   }
 }
-.submit-btn {
-  text-align: center;
-  .el-button {
-    width: 140px;
-  }
-}
-.hiddenInput {
-  display: none;
-}
 </style>

src/views/normal/club/cate/configs/index.js

@@ -0,0 +1,12 @@
+export const tipList = ['例如：品牌', '例如：尺寸', '例如：功率', '例如：重量']
+
+export const resetFormData = () => ({
+  productTypeId: '',
+  authUserId: '',
+  brandId: '',
+  name: '',
+  image: '',
+  createBy: '',
+  paramList: []
+})
+

src/views/normal/club/cate/edit.vue

@@ -0,0 +1,266 @@
+<template>
+  <div v-loading="isLoading" class="edit-cate-info page-form-container">
+    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
+      <el-form-item prop="name" label="设备名称：">
+        <el-input v-model="formData.name" placeholder="请输入设备名称" />
+      </el-form-item>
+      <el-form-item prop="image" label="设备图片：" class="pd-10">
+        <el-input v-show="false" v-model="formData.image" />
+        <upload-image
+          tip="建议尺寸：542px * 542px"
+          :image-list="productImageList"
+          :before-upload="beforeUploadImage"
+          @success="onUploadImageSuccess"
+          @remove="onUploadImageRemove"
+        />
+      </el-form-item>
+      <el-form-item v-if="shopType === 2" label="所属品牌:" prop="brandId">
+        <el-select v-model="formData.brandId" placeholder="请选择品牌" style="width: 100%" filterable clearable>
+          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="相关参数:" prop="paramList">
+        <div v-for="item in formData.paramList" :key="item.uuid" class="form-group">
+          <el-input v-model="item.paramName" class="param-title" :placeholder="item.firstTip || '参数名称'" />
+          <el-input v-model="item.paramContent" class="param-info" placeholder="请输入参数信息" />
+          <span v-if="paramCount > 4" class="closed el-icon-close" @click="handleRemoveParam(item)" />
+        </div>
+        <el-button type="primary" size="mini" @click="handleAddParam">添加参数</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="submit-btn">
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="warning" @click="$_back()">返回</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import UploadImage from '@/components/UploadImage'
+import { tipList, resetFormData } from './configs'
+import { createProductCate, fetchAuthProductFormData } from '@/api/product'
+import { mapGetters } from 'vuex'
+import { fetchBrandList } from '@/api/brand'
+
+let uuid = 0
+
+export default {
+  components: {
+    UploadImage
+  },
+  data() {
+    const paramListValidate = (rules, value, callback) => {
+      value.every((item) => item.paramName && item.paramContent)
+      const notEmptyList = value.filter((item) => item.paramName.trim() && item.paramContent.trim())
+      if (notEmptyList.length === 0) {
+        callback(new Error('参数列表不能为空'))
+      } else if (notEmptyList.length < 4) {
+        callback(new Error('请填写至少4项参数'))
+      } else {
+        callback()
+      }
+    }
+
+    const valideBrandId = (rules, value, callback) => {
+      if (!value) {
+        return callback(new Error('所属品牌不能为空'))
+      }
+      callback()
+    }
+
+    return {
+      isLoading: false,
+      formData: resetFormData(),
+      rules: {
+        name: [{ required: true, message: '请输入设备名称', trigger: ['blur'] }],
+        image: [{ required: true, message: '请上传设备图片', trigger: ['change'] }],
+        paramList: [
+          { required: true, message: '请填写设备参数', trigger: ['change'] },
+          { validator: paramListValidate, trigger: ['change'] }
+        ],
+        brandId: [{ required: true, validator: valideBrandId, trigger: 'change' }]
+      },
+      brandList: [],
+      productImageList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'shopType', 'proxyInfo']),
+    // 参数长度
+    paramCount() {
+      return this.formData.paramList.length
+    }
+  },
+  created() {
+    this.initEmptyParamList()
+    const type = this.$route.query.type
+    if (this.shopType === 2) {
+      this.getBrandList()
+    }
+
+    if (type === 'edit') {
+      this.fetchProductData()
+    }
+  },
+  methods: {
+    // 提交
+    async submit() {
+      this.isLoading = true
+      try {
+        await this.$refs.form.validate()
+        this.createProductCate()
+      } catch (error) {
+        console.log(error)
+        this.isLoading = false
+      }
+    },
+
+    // 保存设备信息
+    async createProductCate() {
+      this.formData.authUserId = this.authUserId
+      this.formData.createBy = this.authUserId
+      if (this.shopType === 1) {
+        this.formData.brandId = this.proxyInfo?.brandId || this.brandId || ''
+      }
+      const data = {
+        ...this.formData,
+        paramList: this.generageParamList()
+      }
+      try {
+        await createProductCate(data)
+        this.$message.success('保存设备分类成功')
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.push('device-cate')
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    // 获取设备数据信息
+    async fetchProductData() {
+      try {
+        const id = this.$route.query.id
+        const { data } = await fetchAuthProductFormData({ productTypeId: id })
+        this.initProductData(data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 初始化设备信息
+    initProductData(data) {
+      for (const key in this.formData) {
+        if (Object.hasOwnProperty.call(data, key)) {
+          if (key === 'paramList') {
+            this.initParamList(data[key])
+          } else {
+            this.formData[key] = data[key]
+          }
+        }
+      }
+      if (data.image) {
+        this.productImageList = [{ name: '设备图片', url: this.formData.image }]
+      }
+    },
+
+    // 获取品牌信息
+    async getBrandList() {
+      try {
+        const { data } = await fetchBrandList({ type: 3, authUserId: this.authUserId })
+        this.brandList = data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 生成最终的设备参数
+    generageParamList() {
+      return this.formData.paramList.map((param) => ({
+        paramContent: param.paramContent,
+        paramName: param.paramName
+      }))
+    },
+
+    // 初始化参数列表
+    initParamList(list) {
+      if (!list) return
+      this.formData.paramList.splice(0, list.length, ...list)
+    },
+
+    // 初始化空参数列表
+    initEmptyParamList() {
+      for (const item of tipList) {
+        this.formData.paramList.push({
+          uuid: ++uuid,
+          paramContent: '',
+          paramName: '',
+          firstTip: item
+        })
+      }
+    },
+
+    // 添加一栏参数
+    handleAddParam() {
+      this.formData.paramList.push({
+        uuid: ++uuid,
+        paramContent: '',
+        paramName: ''
+      })
+    },
+
+    // 删除一栏参数
+    handleRemoveParam(index) {
+      this.formData.paramList.splice(index, 1)
+    },
+
+    // 设备图片上传
+    beforeUploadImage(file) {
+      return true
+    },
+    onUploadImageSuccess({ response, file, fileList }) {
+      this.formData.image = response.data
+      this.productImageList = fileList
+    },
+    onUploadImageRemove({ file, fileList }) {
+      this.formData.image = ''
+      this.productImageList = []
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.edit-cate-info {
+  .form-group {
+    position: relative;
+    margin-bottom: 2%;
+    .param-title {
+      width: 30%;
+    }
+    .param-info {
+      width: 68%;
+      margin-left: 2%;
+    }
+
+    .closed {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: -20px;
+      cursor: pointer;
+      color: #ddd;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  .submit-btn {
+    text-align: center;
+    margin-top: 60px;
+    .el-button {
+      width: 140px;
+    }
+  }
+}
+</style>

src/views/normal/club/device-cate.vue → src/views/normal/club/cate/index.vue

@@ -96,37 +96,14 @@
 
     <!-- 页码 -->
     <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
-
-    <!-- 设备添加对话框 -->
-    <el-dialog title="添加设备" :visible.sync="dialogVisible" width="30%" @close="onDialogClose">
-      <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
-        <el-form-item prop="name" label="设备名称：">
-          <el-input v-model="formData.name" placeholder="请输入设备名称" />
-        </el-form-item>
-        <el-form-item prop="image" label="设备图片：" class="pd-10">
-          <el-input v-show="false" v-model="formData.image" />
-          <upload-image
-            tip="建议尺寸：542px * 542px"
-            :image-list="productImageList"
-            :before-upload="beforeUploadImage"
-            @success="onUploadImageSuccess"
-            @remove="onUploadImageRemove"
-          />
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :loading="isLoading" @click="onSave">保 存</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import PermissionButton from '@/views/components/PermissionButton'
-import UploadImage from '@/components/UploadImage'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { mapGetters } from 'vuex'
-import { createProductCate, fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'
+import { fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'
 
 const resetFormData = () => ({
   productTypeId: '',
@@ -138,7 +115,7 @@ const resetFormData = () => ({
 
 export default {
   name: 'ComplexTable',
-  components: { PermissionButton, UploadImage },
+  components: { Pagination, PermissionButton },
   data() {
     return {
       isLoading: false,
@@ -146,7 +123,6 @@ export default {
       list: null,
       total: 0,
       listLoading: true,
-      dialogVisible: false,
       listQuery: {
         authUserId: '',
         auditStatus: '',
@@ -167,7 +143,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['userIdentity', 'authUserId'])
+    ...mapGetters(['authUserId'])
   },
   created() {
     this.getList()
@@ -182,6 +158,7 @@ export default {
     // 过滤列表
     handleFilter() {
       this.formData.pageNum = 1
+      this.list = []
       this.fetchProductList()
     },
     // 改变启用状态
@@ -225,40 +202,13 @@ export default {
         console.log(error)
       }
     },
-    // 保存
-    async onSave() {
-      this.isLoading = true
-      try {
-        await this.$refs.form.validate()
-      } catch (error) {
-        console.log(error)
-        this.isLoading = false
-      }
-      this.formData.authUserId = this.authUserId
-      this.formData.createBy = this.authUserId
-      try {
-        await createProductCate(this.formData)
-        this.$message.success('保存设备分类成功')
-        this.dialogVisible = false
-        this.fetchProductList()
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isLoading = false
-      }
-    },
     // 添加分类
     handleAdd() {
-      this.dialogVisible = true
+      this.$router.push(`device-cate-edit?type=add`)
     },
     // 编辑分类
     handleEdit(row) {
-      this.formData.productTypeId = row.productTypeId
-      this.formData.name = row.name
-      this.formData.image = row.image
-      this.formData.createBy = row.createBy
-      this.productImageList.push({ url: row.image, name: row.name })
-      this.dialogVisible = true
+      this.$router.push(`device-cate-edit?id=${row.productTypeId}&type=edit`)
     },
     // 删除
     async handleRemove(row) {
@@ -285,22 +235,7 @@ export default {
         console.log(error)
       }
     },
-    onDialogClose() {
-      this.$refs.form.resetFields()
-      this.formData = resetFormData()
-      this.productImageList = []
-    },
-    beforeUploadImage(file) {
-      return true
-    },
-    onUploadImageSuccess({ response, file, fileList }) {
-      this.formData.image = response.data
-      this.productImageList = fileList
-    },
-    onUploadImageRemove({ file, fileList }) {
-      this.formData.image = ''
-      this.productImageList = []
-    },
+
     // 表格索引
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1

src/views/normal/club/device/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="isLoading" class="addProduct">
+  <div v-loading="isLoading" class="addProduct page-form-container">
     <el-form ref="addFormRef" label-width="130px" class="addForm" :model="formData" :rules="rules">
       <!--
       <el-form-item label="设备名称:" prop="productName">
@@ -28,24 +28,6 @@
         <el-input v-model="formData.snCode" placeholder="请输入设备SN码" />
       </el-form-item>
 
-      <el-form-item v-if="shopType === 2" label="所属品牌:" prop="brandId">
-        <el-select v-model="formData.brandId" placeholder="请选择品牌" style="width: 100%" filterable>
-          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <!-- 暂时移除
-      <el-form-item label="设备图片:" prop="productImage">
-        <upload-image
-          tip="建议尺寸：542px * 542px"
-          :image-list="productImageList"
-          :before-upload="beforeProductImageUpload"
-          @success="uploadProductImageSuccess"
-          @remove="handleProductImageRemove"
-        />
-        <el-input v-model="formData.productImage" class="hiddenInput" />
-      </el-form-item>
-       -->
-
       <!-- **************** 新方法配置授权牌 START ******************* -->
       <!-- <el-form-item label="授权牌:">
         <el-radio-group v-model="formData.addQrCodeFlag" size="mini">
@@ -83,16 +65,16 @@
         <el-input v-model="formData.certificateImage" class="hiddenInput" />
       </el-form-item>
       <!-- 是否生成二维码授权牌 -->
-      <el-form-item label="生成二维码授权牌:">
+      <!-- <el-form-item label="生成二维码授权牌:">
         <el-radio-group v-model="formData.addQrCodeFlag" size="mini">
           <el-radio :label="0" border>否</el-radio>
           <el-radio :label="1" border :disabled="certificateImageList.length <= 0">是</el-radio>
         </el-radio-group>
-      </el-form-item>
+      </el-form-item> -->
       <!-- 二维码授权牌模板 -->
-      <el-form-item v-if="formData.addQrCodeFlag === 1" label="选择模板:">
+      <!-- <el-form-item v-if="formData.addQrCodeFlag === 1" label="选择模板:">
         <auth-card-template v-model="formData.addTemplateType" :image-list="certificateImageList" />
-      </el-form-item>
+      </el-form-item> -->
       <!-- **************** 旧方法配置授权牌 END ******************* -->
 
       <el-form-item label="购买渠道:">
@@ -110,15 +92,6 @@
         />
         <el-input v-show="false" v-model="formData.invoiceImage" />
       </el-form-item>
-
-      <el-form-item label="相关参数:" prop="paramList">
-        <div v-for="(item, index) in paramList" :key="index" class="form-group paramsItem">
-          <el-input v-model="item.paramName" class="param-title" :placeholder="item.tip.first" maxlength="10" />
-          <el-input v-model="item.paramContent" class="param-info" placeholder="请输入参数信息" maxlength="50" />
-          <span v-if="paramsCount > 4" class="closed el-icon-close" @click="handleRemoveParam(index)" />
-        </div>
-        <el-button type="primary" size="mini" @click="handleAddParam">添加参数</el-button>
-      </el-form-item>
     </el-form>
     <div class="submit-btn">
       <el-button type="primary" @click="submit">保存</el-button>
@@ -130,13 +103,12 @@
 <script>
 import UploadImage from '@/components/UploadImage'
 import { saveProduct, getProductById, fetchProductSelectList } from '@/api/product'
-import { fetchBrandList } from '@/api/brand'
 import { mapGetters } from 'vuex'
 import { isSnCode } from '@/utils/validate'
-import AuthCardTemplate from '@/views/components/AuthCardTemplate/index.vue'
+// import AuthCardTemplate from '@/views/components/AuthCardTemplate/index.vue'
 import { getStorage } from '@/utils/storage'
 export default {
-  components: { UploadImage, AuthCardTemplate },
+  components: { UploadImage },
   data() {
     const valideSNcode = (rules, value, callback) => {
       if (!isSnCode(value)) {
@@ -144,26 +116,6 @@ export default {
       }
       callback()
     }
-
-    const valideBrandId = (rules, value, callback) => {
-      if (!value) {
-        return callback(new Error('所属品牌不能为空'))
-      }
-      callback()
-    }
-
-    const paramListValidate = (rules, value, callback) => {
-      value.every((item) => item.paramName && item.paramContent)
-      const notEmptyList = value.filter((item) => item.paramName.trim() && item.paramContent.trim())
-      if (notEmptyList.length === 0) {
-        callback(new Error('参数列表不能为空'))
-      } else if (notEmptyList.length < 4) {
-        callback(new Error('请填写至少4项参数'))
-      } else {
-        callback()
-      }
-    }
-
     return {
       isLoading: false,
       editType: 'add',
@@ -176,10 +128,8 @@ export default {
         certificateImage: '', //	授权牌照
         createBy: '', //	创建人id
         // 	设备参数列表
-        paramList: [],
         productId: '', //	授权设备id
         productImage: '', //	设备图片
-        // productName: '', //	设备名称
         snCode: '', //	设备SN码
         status: 2, //	上架状态：0下线，1上线 2待审核
         brandId: '',
@@ -189,21 +139,11 @@ export default {
         purchaseWay: '', // 购买渠道
         invoiceImage: '' // 发票
       },
-      paramList: [], // 参数列表
       rules: {
         certificateImage: [{ required: true, message: '授权牌照不能为空' }],
-        paramList: [{ validator: paramListValidate, trigger: 'change' }],
-        // productImage: [{ required: true, message: '设备图片不能为空' }], 暂时移除
         snCode: [{ required: true, message: 'SN码不能为空' }, { validator: valideSNcode }],
-        // productName: [
-        //   { required: true, message: '设备名称不能为空' },
-        //   { max: 50, message: '字数在50字符以内' }
-        // ],
-        productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }],
-        brandId: [{ required: true, validator: valideBrandId, trigger: 'change' }]
+        productTypeId: [{ required: true, message: '设备名称不能为空', trigger: 'change' }]
       },
-      // 参数框的提示语
-      tipList: ['例如：品牌', '例如：尺寸', '例如：功率', '例如：重量'],
 
       // 商品图片列表
       productImageList: [],
@@ -216,24 +156,14 @@ export default {
   computed: {
     ...mapGetters(['authUserId', 'proxyInfo', 'shopType', 'brandId'])
   },
-  watch: {
-    paramList: {
-      deep: true,
-      handler: function() {
-        this.formData.paramList = this.setParamToFormData()
-      }
-    }
-  },
   created() {
     this.editType = this.$route.query.type || 'add'
     this.formData.productId = this.$route.query.id
     this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
     // 获取当前设备所属机构的id
     this.formData.authId = getStorage('device-setting-authId')
-    this.initFormData()
-    // 如果供应商类型为代理商  则需要获取它代理的品牌列表
-    if (this.shopType === 2) {
-      this.getBrandList()
+    if (this.editType === 'edit') {
+      this.initFormData()
     }
     // 如果供应商类型为品牌方，则自动设置品牌id
     if (this.shopType === 1) {
@@ -249,68 +179,32 @@ export default {
     },
     // 初始化表单数据
     initFormData() {
-      if (this.editType !== 'edit') {
-        this.initParamList()
-        return
-      }
       this.isLoading = true
       getProductById({ productId: this.formData.productId }).then((res) => {
         console.log(res)
         for (const key in res.data) {
           if (Object.hasOwnProperty.call(res.data, key)) {
-            if (key !== 'paramList') {
-              this.formData[key] = res.data[key]
-            }
             if (key === 'productTypeId') {
               this.formData[key] = parseInt(res.data[key])
+            } else {
+              this.formData[key] = res.data[key]
             }
           }
         }
-        // 初始化参数
-        this.paramList = res.data.paramList.map((param) => {
-          param.tip = {}
-          param.tip.first = '参数名'
-          param.tip.second = '请输入参数信息'
-          return param
-        })
-        console.log(this.paramList)
-        this.paramsCount = this.paramList.length
-        if (this.paramsCount < 4) {
-          this.initParamList(4 - this.paramsCount)
-        }
         this.initImageList()
 
-        this.invoiceImageList = [{ name: '', url: res.data.invoiceImage }]
+        if (res.data.invoiceImage) {
+          this.invoiceImageList = [{ name: '', url: res.data.invoiceImage }]
+        }
 
         this.isLoading = false
       })
     },
 
-    // 初始化参数列表
-    initParamList(count) {
-      if (this.editType === 'add') {
-        count = this.paramsCount
-      }
-      for (let i = 0; i < count; i++) {
-        this.paramList.push({
-          paramContent: '',
-          paramName: '',
-          tip: {
-            first: this.tipList[i],
-            second: '请输入参数信息'
-          }
-        })
-      }
-    },
-
     // 初始化上传图片列表
     initImageList() {
       setTimeout(() => {
-        // const productImage = this.formData.productImage // 暂时移除
         const certificateImage = this.formData.certificateImage
-        // if (productImage) { // 暂时移除
-        //   this.productImageList.push({ name: 'productImage', url: productImage })
-        // }
         if (certificateImage) {
           this.certificateImageList.push({ name: 'certificateImage', url: certificateImage })
         }
@@ -325,7 +219,6 @@ export default {
 
     // 提交表单
     submit() {
-      this.formData.paramList = this.setParamToFormData()
       this.$refs.addFormRef.validate((valide) => {
         if (valide) {
           this.save()
@@ -339,6 +232,7 @@ export default {
       // createBy先判断是否为代理操作，是就从代理数据中获取，否则直接获取当前登录用户的信息
       this.formData.createBy = this.proxyInfo?.authUserId || this.authUserId
       this.formData.authUserId = this.proxyInfo?.authUserId || this.authUserId
+      this.formData.addQrCodeFlag = 0
       saveProduct(this.formData)
         .then((res) => {
           if (res.code !== 0) return
@@ -349,8 +243,6 @@ export default {
             message: h('i', { style: 'color: #333' }, `已${tip}设备`),
             duration: 2000
           })
-          this.$refs.addFormRef.resetFields()
-          this.clearFormData()
           this.$store.dispatch('tagsView/delView', this.$route)
           this.$router.push(`/club/device-list?id=${this.formData.authId}`)
         })
@@ -359,19 +251,6 @@ export default {
         })
     },
 
-    // 保存参数到formdata
-    setParamToFormData() {
-      return this.paramList.filter((item) => item.paramContent !== '' && item.paramName !== '')
-    },
-
-    // 获取品牌信息
-    getBrandList() {
-      fetchBrandList({ type: 3, authUserId: this.formData.authUserId }).then((res) => {
-        console.log(res)
-        this.brandList = res.data
-      })
-    },
-
     // 获取设备列表
     async fetchDeviceList() {
       try {
@@ -384,25 +263,6 @@ export default {
       }
     },
 
-    // 添加一栏参数
-    handleAddParam() {
-      this.paramsCount += 1
-      this.paramList.push({
-        paramContent: '',
-        paramName: '',
-        tip: {
-          first: '参数名称',
-          second: '请输入参数信息'
-        }
-      })
-    },
-
-    // 删除一栏参数
-    handleRemoveParam(index) {
-      this.paramsCount -= 1
-      this.paramList.splice(index, 1)
-    },
-
     // 产品图片上传
     beforeProductImageUpload(file) {
       const flag = file.size / 1024 / 1024 < 1
@@ -453,13 +313,6 @@ export default {
     handleInvoiceImageRemove({ file, fileList }) {
       this.invoiceImageList = fileList
       this.formData.invoiceImage = ''
-    },
-
-    // 清除表单数据
-    clearFormData() {
-      this.paramList = []
-      this.paramsCount = 4
-      this.initParamList()
     }
   }
 }
@@ -467,7 +320,6 @@ export default {
 
 <style lang="scss" scoped>
 .addProduct {
-  margin-bottom: 80px;
   .form-group {
     margin-bottom: 2%;
     .param-title {
@@ -479,11 +331,7 @@ export default {
     }
   }
 }
-.addForm {
-  width: 640px;
-  margin: 0 auto;
-  margin-top: 80px;
-}
+
 .submit-btn {
   text-align: center;
   .el-button {

src/views/normal/club/edit.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="club-edit">
-    <el-form ref="submitForm" class="club-edit-form" label-width="120px" :model="formData" :rules="rules">
+  <div class="club-edit page-form-container">
+    <el-form ref="submitForm" label-width="120px" :model="formData" :rules="rules">
       <el-form-item label="机构名称:" prop="name">
         <el-input v-model="formData.name" placeholder="请输入机构名称" clearable />
       </el-form-item>
-
       <el-form-item label="所在地区:" prop="address">
         <el-cascader
           ref="cascader"
@@ -180,8 +179,6 @@
       :visible.sync="dialogMapVisible"
       width="80%"
     >
-      <!-- <location v-if="dialogMapVisible" :init-point="formData.point" @point="handlePointChange" /> -->
-      <!-- <map-ui v-if="dialogMapVisible" :init-point="formData.point" :address="locationAddress" @change="markerChange" /> -->
       <a-map ref="aMap" :lnglat="lnglat" :address="locationAddress" @position="onPosition" />
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" size="mini" @click="dialogMapVisible = false">确 定</el-button>
@@ -191,8 +188,6 @@
 </template>
 
 <script>
-// import Location from '@/components/location'
-import AMapUI from '@/components/AMapUI'
 import SimpleAMap from '@/components/SimpleAMap'
 import UploadImage from '@/components/UploadImage'
 import { mapGetters } from 'vuex'
@@ -204,8 +199,6 @@ import { authTempUsed } from '@/api/system'
 
 export default {
   components: {
-    // Location
-    [AMapUI.name]: AMapUI,
     [SimpleAMap.name]: SimpleAMap,
     UploadImage
   },
@@ -649,11 +642,6 @@ export default {
   margin-bottom: 80px;
 }
 
-.club-edit-form {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 80px;
-}
 .submit-btn {
   text-align: center;
   .el-button {

src/views/normal/settings/accounts/edit.vue

@@ -159,12 +159,4 @@ export default {
   margin: 0 auto;
   margin-top: 100px;
 }
-.control-box {
-  margin: 20px 0;
-  text-align: center;
-  .el-button {
-    width: 120px;
-    margin: 0 8px;
-  }
-}
 </style>

src/views/normal/settings/roles/edit.vue

@@ -132,12 +132,4 @@ export default {
   margin: 0 auto;
   margin-top: 40px;
 }
-.control-box {
-  margin: 20px 0;
-  text-align: center;
-  .el-button {
-    width: 120px;
-    margin: 0 8px;
-  }
-}
 </style>