认证设备，认证设备分类字段修改

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,18 @@ 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;
+}

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">
@@ -52,7 +52,7 @@
             </div>
           </template>
         </div>
-      </div>
+      </div> -->
       <el-form 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

@@ -49,8 +49,9 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{ row }">
-          <el-button v-if="row.auditStatus !== 1" type="warning" size="mini" @click="handleAudit(row)">审核</el-button>
-          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
+          <el-button type="warning" size="mini" @click="handleAudit(row)">审核</el-button>
+          <!-- <el-button v-if="row.auditStatus !== 1" type="warning" size="mini" @click="handleAudit(row)">审核</el-button> -->
+          <!-- <span v-else class="status success el-icon-check">&nbsp;已审核</span> -->
         </template>
       </el-table-column>
     </el-table>
@@ -131,9 +132,10 @@ export default {
     },
     // 审核设备分类
     handleAudit(row) {
-      this.currentData = row
-      this.srcList.push(row.image)
-      this.dialogVisible = true
+      // this.currentData = row
+      // this.srcList.push(row.image)
+      // this.dialogVisible = true
+      this.$router.push(`/audit/device/cate-detail?id=${row.productTypeId}`)
     },
     // 审核
     async handleAuditStatus() {

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

@@ -0,0 +1,156 @@
+<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 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 {
+      isLoading: false,
+      auditForm: {
+        auditBy: '', // 审核人id
+        productTypeId: '', // 机构id
+        auditStatus: 1, // 审核状态
+        invalidReason: '' // 审核信息
+      },
+      rules: {
+        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      },
+      cateData: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    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/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

@@ -1,329 +1,258 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-control">
-        <span>设备名称:</span>
-        <el-input v-model="listQuery.name" placeholder="设备名称" @keyup.enter.native="handleFilter" />
-      </div>
-      <div class="filter-control">
-        <span>审核状态:</span>
-        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="待审核" :value="2" />
-          <el-option label="审核通过" :value="1" />
-          <el-option label="审核未通过" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <span>上线状态:</span>
-        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
-          <el-option label="全部" value="" />
-          <el-option label="已上线" :value="1" />
-          <el-option label="待上线" :value="2" />
-          <el-option label="未上线" :value="0" />
-        </el-select>
-      </div>
-      <div class="filter-control">
-        <permission-button type="primary" @click="handleFilter">查询</permission-button>
-        <permission-button type="primary" @click="handleAdd">添加</permission-button>
-      </div>
-    </div>
-    <!-- 表格区域 -->
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-      header-row-class-name="tableHeader"
-    >
-      <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
-      <el-table-column label="设备名称" align="center" prop="name" />
-
-      <el-table-column label="审核状态" width="220px" align="center">
-        <template slot-scope="{ row }">
-          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
-          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
-          <!-- 未通过原因展示 -->
-          <template v-if="row.auditStatus === 0">
-            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
-            <el-popover placement="top-start" title="审核说明" width="400" trigger="hover" :content="row.invalidReason">
-              <el-tag slot="reference" size="small" type="danger" class="reason">
-                <span>审核未通过</span>
-                <span class="el-icon-question status danger" />
-              </el-tag>
-            </el-popover>
-            <!-- 未通过原因展示END -->
-          </template>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="上线状态" width="140px" align="center">
-        <template slot-scope="{ row }">
-          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
-          <template v-if="row.auditStatus === 1">
-            <template v-if="row.status === 0">
-              <span style="margin-right: 10px" class="status danger">已下线</span>
-              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
-            </template>
-            <template v-else>
-              <span style="margin-right: 10px" class="status success">已上线</span>
-              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
-            </template>
-          </template>
-          <template v-else>
-            <!-- <el-tag type="warning">待上线</el-tag> -->
-            <span style="margin-right: 10px" class="status warning">待上线</span>
-          </template>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" class-name="status-col" width="160px" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.createTime | formatTime }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建人" align="center" prop="createBy" width="160" />
-      <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
-      <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="{ row }">
-          <permission-button type="primary" size="mini" @click="handleEdit(row)"> 编辑 </permission-button>
-          <permission-button type="danger" size="mini" @click="handleRemove(row)"> 删除 </permission-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 页码 -->
-    <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 Pagination from '@/components/Pagination' // secondary package based on el-pagination
-import UploadImage from '@/components/UploadImage'
-import { mapGetters } from 'vuex'
-import { createProductCate, fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'
-
-const resetFormData = () => ({
-  productTypeId: '',
-  authUserId: '',
-  name: '',
-  image: '',
-  createBy: ''
-})
-
-export default {
-  name: 'ComplexTable',
-  components: { Pagination, PermissionButton, UploadImage },
-  data() {
-    return {
-      isLoading: false,
-      tableKey: 0,
-      list: null,
-      total: 0,
-      listLoading: true,
-      dialogVisible: false,
-      listQuery: {
-        authUserId: '',
-        auditStatus: '',
-        listType: 1,
-        name: '',
-        pageNum: 1,
-        pageSize: 10,
-        status: ''
-      },
-      productInfo: {},
-      // 添加分类表单
-      formData: resetFormData(),
-      rules: {
-        name: [{ required: true, message: '请输入设备名称', trigger: ['blur'] }],
-        image: [{ required: true, message: '请上传设备图片', trigger: ['change'] }]
-      },
-      productImageList: []
-    }
-  },
-  computed: {
-    ...mapGetters(['userIdentity', 'authUserId'])
-  },
-  created() {
-    this.getList()
-  },
-
-  methods: {
-    // 获取列表信息
-    getList() {
-      this.listLoading = false
-      this.fetchProductList()
-    },
-    // 过滤列表
-    handleFilter() {
-      this.formData.pageNum = 1
-      this.fetchProductList()
-    },
-    // 改变启用状态
-    async handleChangeStatus(row) {
-      let status = Boolean(row.status)
-      const tip = status ? '下架' : '上架'
-      let confirmType = ''
-      try {
-        confirmType = await this.$confirm(`确定${tip}该设备管理吗？`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-        status = !status
-      } catch (error) {
-        console.log(error)
-      }
-
-      if (confirmType !== 'confirm') {
-        return
-      }
-      try {
-        await updateProductCateStatus({
-          productTypeId: row.productTypeId,
-          status: Number(status)
-        })
-        this.$message.success('修改设备状态成功')
-        this.fetchProductList()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    // 获取设备分类列表
-    async fetchProductList() {
-      this.listQuery.authUserId = this.authUserId
-      try {
-        const res = await fetchProductCateList(this.listQuery)
-        this.total = res.data.total
-        this.list = res.data.list
-      } catch (error) {
-        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
-    },
-    // 编辑分类
-    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
-    },
-    // 删除
-    async handleRemove(row) {
-      let confirmType = ''
-      try {
-        confirmType = await this.$confirm('确认删除改商品分类吗？该操作不可逆！', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-      } catch (error) {
-        console.log(error)
-      }
-
-      if (confirmType !== 'confirm') return
-
-      try {
-        await removeProductCate({
-          productTypeId: row.productTypeId
-        })
-        this.$message.success('删除设备分类成功')
-        this.fetchProductList()
-      } catch (error) {
-        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
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  ::v-deep {
-    .el-dialog__body {
-      padding-bottom: 0;
-    }
-  }
-  .pd-10 {
-    padding-top: 10px;
-  }
-}
-</style>
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>设备名称:</span>
+        <el-input v-model="listQuery.name" placeholder="设备名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" @click="handleFilter">查询</permission-button>
+        <permission-button type="primary" @click="handleAdd">添加</permission-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+    >
+      <el-table-column label="序号" :index="indexMethod" type="index" align="center" width="80" />
+      <el-table-column label="设备名称" align="center" prop="name" />
+
+      <el-table-column label="审核状态" width="220px" align="center">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.auditStatus === 2" size="small" type="warning">待审核</el-tag>
+          <el-tag v-if="row.auditStatus === 1" size="small" type="success">审核通过</el-tag>
+          <!-- 未通过原因展示 -->
+          <template v-if="row.auditStatus === 0">
+            <!-- <span class="status danger">审核未通过&nbsp;</span> -->
+            <el-popover placement="top-start" title="审核说明" width="400" trigger="hover" :content="row.invalidReason">
+              <el-tag slot="reference" size="small" type="danger" class="reason">
+                <span>审核未通过</span>
+                <span class="el-icon-question status danger" />
+              </el-tag>
+            </el-popover>
+            <!-- 未通过原因展示END -->
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="上线状态" width="140px" align="center">
+        <template slot-scope="{ row }">
+          <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
+          <template v-if="row.auditStatus === 1">
+            <template v-if="row.status === 0">
+              <span style="margin-right: 10px" class="status danger">已下线</span>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
+            </template>
+            <template v-else>
+              <span style="margin-right: 10px" class="status success">已上线</span>
+              <permission-button type="info" size="mini" @click="handleChangeStatus(row)">下线</permission-button>
+            </template>
+          </template>
+          <template v-else>
+            <!-- <el-tag type="warning">待上线</el-tag> -->
+            <span style="margin-right: 10px" class="status warning">待上线</span>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" class-name="status-col" width="160px" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.createTime | formatTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" align="center" prop="createBy" width="160" />
+      <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
+      <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
+        <template slot-scope="{ row }">
+          <permission-button type="primary" size="mini" @click="handleEdit(row)"> 编辑 </permission-button>
+          <permission-button type="danger" size="mini" @click="handleRemove(row)"> 删除 </permission-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import PermissionButton from '@/views/components/PermissionButton'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import { mapGetters } from 'vuex'
+import { fetchProductCateList, removeProductCate, updateProductCateStatus } from '@/api/product'
+
+const resetFormData = () => ({
+  productTypeId: '',
+  authUserId: '',
+  name: '',
+  image: '',
+  createBy: ''
+})
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination, PermissionButton },
+  data() {
+    return {
+      isLoading: false,
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        authUserId: '',
+        auditStatus: '',
+        listType: 1,
+        name: '',
+        pageNum: 1,
+        pageSize: 10,
+        status: ''
+      },
+      productInfo: {},
+      // 添加分类表单
+      formData: resetFormData(),
+      rules: {
+        name: [{ required: true, message: '请输入设备名称', trigger: ['blur'] }],
+        image: [{ required: true, message: '请上传设备图片', trigger: ['change'] }]
+      },
+      productImageList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId'])
+  },
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    // 获取列表信息
+    getList() {
+      this.listLoading = false
+      this.fetchProductList()
+    },
+    // 过滤列表
+    handleFilter() {
+      this.formData.pageNum = 1
+      this.list = []
+      this.fetchProductList()
+    },
+    // 改变启用状态
+    async handleChangeStatus(row) {
+      let status = Boolean(row.status)
+      const tip = status ? '下架' : '上架'
+      let confirmType = ''
+      try {
+        confirmType = await this.$confirm(`确定${tip}该设备管理吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        status = !status
+      } catch (error) {
+        console.log(error)
+      }
+
+      if (confirmType !== 'confirm') {
+        return
+      }
+      try {
+        await updateProductCateStatus({
+          productTypeId: row.productTypeId,
+          status: Number(status)
+        })
+        this.$message.success('修改设备状态成功')
+        this.fetchProductList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 获取设备分类列表
+    async fetchProductList() {
+      this.listQuery.authUserId = this.authUserId
+      try {
+        const res = await fetchProductCateList(this.listQuery)
+        this.total = res.data.total
+        this.list = res.data.list
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 添加分类
+    handleAdd() {
+      this.$router.push(`device-cate-edit?type=add`)
+    },
+    // 编辑分类
+    handleEdit(row) {
+      this.$router.push(`device-cate-edit?id=${row.productTypeId}&type=edit`)
+    },
+    // 删除
+    async handleRemove(row) {
+      let confirmType = ''
+      try {
+        confirmType = await this.$confirm('确认删除改商品分类吗？该操作不可逆！', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+      } catch (error) {
+        console.log(error)
+      }
+
+      if (confirmType !== 'confirm') return
+
+      try {
+        await removeProductCate({
+          productTypeId: row.productTypeId
+        })
+        this.$message.success('删除设备分类成功')
+        this.fetchProductList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 表格索引
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  ::v-deep {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+  .pd-10 {
+    padding-top: 10px;
+  }
+}
+</style>

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"
@@ -649,11 +648,6 @@ export default {
   margin-bottom: 80px;
 }
 
-.club-edit-form {
-  width: 600px;
-  margin: 0 auto;
-  margin-top: 80px;
-}
 .submit-btn {
   text-align: center;
   .el-button {