内容管理-图片：添加排序功能

src/views/menduner/system/web/WebContentForm.vue

@@ -36,6 +36,9 @@
       <el-form-item label="标题" prop="title">
         <el-input v-model="formData.title" placeholder="请填写" />
       </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input v-model="formData.sort" placeholder="请填写" />
+      </el-form-item>
       <el-form-item label="状态" prop="status" required>
         <el-radio-group v-model="formData.status">
           <el-radio value="0">激活</el-radio>
@@ -65,7 +68,7 @@ const formData = ref({
   link: '',
   title: '',
   status: '0',
-  // sort: 0,
+  sort: 0,
   url: ''
 })
 const maxWidth = ref(0)
@@ -125,8 +128,8 @@ const open = async (type: string, key: string, title: string, mark?: string) =>
     // 编辑
     if (mark) {
       editId.value = mark
-      const { img: url, link, title, status } = query.value[key].find(e => e.mark === mark)
-      formData.value = { url, link, title, status }
+      const { img: url, link, title, status, sort } = query.value[key].find(e => e.mark === mark)
+      formData.value = { url, link, title, status, sort }
     }
   } finally {
     formLoading.value = false
@@ -145,7 +148,7 @@ const submitForm = async () => {
   await formRef.value.validate()
   
   const mark = new Date().getTime().toString()
-  const obj = { img: formData.value.url, link: formData.value.link, mark, title: formData.value.title, status: formData.value.status }
+  const obj = { img: formData.value.url, link: formData.value.link, mark, title: formData.value.title, status: formData.value.status, sort: formData.value.sort }
   if (formType.value === 'add') {
     query.value[currentKey.value] = query.value[currentKey.value] ? [...query.value[currentKey.value], obj] : [obj]
   } else {
@@ -190,7 +193,7 @@ const resetForm = () => {
     title: '',
     status: '0',
     url: '',
-    // sort: 0
+    sort: 0
   }
   formRef.value?.resetFields()
 }

src/views/menduner/system/web/index.vue

@@ -18,8 +18,9 @@
     </div>
 
     <el-table v-if="tab !== 9" v-loading="loading" :data="info[tabList[tab].key]" :stripe="true">
+      <el-table-column label="排序" align="center" prop="sort" />
       <el-table-column label="标题" align="center" prop="title" />
-      <el-table-column label="图片" align="center" prop="img">
+      <el-table-column label="图片" align="center" prop="img" width="200">
         <template #default="scope">
           <el-image v-if="scope.row.img" class="h-150px w-200px" :initial-index="info[tabList[tab].key].findIndex(e => e.mark === scope.row.mark)" :src="scope.row.img" lazy preview-teleported :preview-src-list="info[tabList[tab].key].map(e => e.img)" fit="scale-down" />
         </template>