cos upload

src/views/cxshMini/lianxi/member/components/AppMemberEdit.vue

@@ -1,26 +1,23 @@
 <template>
   <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close">
     <el-form ref="form" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="名称" prop="name">
+      <el-form-item label="昵称" prop="name">
         <el-input v-model="form.name" autocomplete="off" />
       </el-form-item>
-      <el-form-item label="类型" prop="type">
-        <el-select v-model="form.type" placeholder="请选择 APP 类型">
-          <el-option label="小程序" :value="1" />
-          <el-option label="H5" :value="2" />
-          <el-option label="后台管理" :value="3" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="描述" prop="description">
-        <el-input v-model="form.description" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="APP图标" prop="appIcon">
+      <el-form-item label="照片" prop="appIcon">
         <single-upload
           style="width: 100px; height: 100px"
           upload-url="http://127.0.0.1:3999/management/api/common/upload"
+          :value="form.url"
           @upload-success="handleUploadSuccess"
         />
       </el-form-item>
+      <el-form-item label="格言" prop="maxim">
+        <el-input v-model="form.maxim" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="标签" prop="tags">
+        <el-input v-model="form.tags" autocomplete="off" />
+      </el-form-item>
     </el-form>
 
     <div slot="footer" class="dialog-footer">
@@ -31,24 +28,26 @@
 </template>
 
 <script>
-  import { doEdit, doAdd } from '@/api/appManagement'
+  import { doEdit, doAdd } from '@/api/miniMember'
   import SingleUpload from '@/components/SingleUpload'
 
   export default {
-    name: 'AppManagementEdit',
+    name: 'MemberEdit',
     components: { SingleUpload },
     data() {
       return {
         id: '',
         form: {
           name: '',
-          type: '',
-          description: '',
-          icon: '',
+          url: '',
+          maxim: '',
+          tags: '',
         },
         rules: {
-          name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
-          type: [{ required: true, trigger: 'blur', message: '请选择类型' }],
+          url: [{ required: true, trigger: 'blur', message: '请上传照片' }],
+          maxim: [{ required: true, trigger: 'blur', message: '请填写格言' }],
+          tags: [{ required: true, trigger: 'blur', message: '请填写标签' }],
+          name: [{ required: true, trigger: 'blur', message: '请填写昵称' }],
         },
         title: '',
         dialogFormVisible: false,
@@ -57,7 +56,7 @@
     created() {},
     methods: {
       handleUploadSuccess(url) {
-        this.form.icon = url
+        this.form.url = url
       },
       showEdit(row) {
         if (!row) {
@@ -66,8 +65,9 @@
           this.title = '编辑'
           this.form = {
             name: row.name,
-            description: row.description,
-            icon: row.icon,
+            url: row.url,
+            tags: row.tags,
+            maxim: row.maxim,
           }
           this.id = row.id
         }
@@ -81,7 +81,7 @@
       save() {
         this.$refs['form'].validate(async (valid) => {
           if (valid) {
-            if (this.id) {
+            if (this.title === '编辑') {
               const { msg } = await doEdit(this.id, this.form)
               this.$baseMessage(msg, 'success')
             } else {

src/views/cxshMini/lianxi/member/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div class="appManagement-container">
-    <el-divider content-position="left">
-      演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
-    </el-divider>
+  <div class="member-container">
     <vab-query-form>
       <vab-query-form-left-panel :span="12">
         <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button>
@@ -22,23 +19,28 @@
 
     <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
       <el-table-column show-overflow-tooltip type="selection" />
-      <el-table-column align="center" label="图标" width="100">
+      <el-table-column align="center" label="顺序" prop="sort" show-overflow-tooltip />
+      <el-table-column align="center" label="照片" width="100">
         <template slot-scope="scope">
           <!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
           <el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
-            <img alt="image" :src="scope.row.icon" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
+            <img alt="image" :src="scope.row.url" style="width: 50px; height: 50px; object-fit: cover" />
           </el-tooltip>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
-      <el-table-column align="center" label="类型" show-overflow-tooltip>
+      <el-table-column align="center" label="昵称" prop="name" show-overflow-tooltip />
+      <el-table-column align="center" label="格言" prop="maxim" show-overflow-tooltip />
+      <el-table-column align="center" label="标签" show-overflow-tooltip>
         <template #default="{ row }">
-          {{ row.type === 1 ? '小程序' : row.type === 2 ? 'H5' : '后台管理' }}
+          <el-tag v-for="(item, index) in row.tags.split(',')" :key="index">
+            {{ item }}
+          </el-tag>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
-      <el-table-column label="操作" show-overflow-tooltip width="200">
+      <el-table-column align="center" label="操作" show-overflow-tooltip width="200">
         <template #default="{ row }">
+          <el-button :disabled="!row.canUp" type="text" @click="moveUp(row.id)">上移</el-button>
+          <el-button :disabled="!row.canDown" type="text" @click="moveDown(row.id)">下移</el-button>
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
@@ -58,12 +60,11 @@
 </template>
 
 <script>
-  import { doDelete, getList } from '@/api/appManagement'
-  import { formatTime } from '@/utils'
-  import Edit from './components/AppManagementEdit'
+  import { getList, doDelete, doMoveUp, doMoveDown } from '@/api/miniMember'
+  import Edit from './components/AppMemberEdit'
 
   export default {
-    name: 'AppManagement',
+    name: 'Member',
     components: { Edit },
     data() {
       return {
@@ -141,6 +142,18 @@
           this.listLoading = false
         }, 300)
       },
+
+      async moveUp(id) {
+        console.log('moveUp', id)
+        await doMoveUp(id)
+        this.$baseMessage('移动成功', 'success')
+        this.fetchData()
+      },
+      async moveDown(id) {
+        await doMoveDown(id)
+        this.$baseMessage('移动成功', 'success')
+        this.fetchData()
+      },
     },
   }
 </script>