feat(cjy): 为栏目信息表单添加排序功能并优化图片上传组件

- 在 ColumnInfoForm.vue 中添加排序字段,使用 el-input-number 组件
- 更新 ImageUpload 组件,添加图片预览和删除功能,并使用 vuedraggable 实现图片拖拽排序
- 在 package.json 中更新 vuedraggable 依赖版本
main
Tuzki 8 months ago
parent a3c565530f
commit 2dfe85a778
  1. 2
      package.json
  2. 42
      src/components/ImageUpload/index.vue
  3. 5
      src/views/cjy/columninfo/ColumnInfoForm.vue
  4. 4
      yarn.lock

@ -77,7 +77,7 @@
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23", "vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3", "vuedraggable": "^2.24.3",
"vuex": "3.6.2", "vuex": "3.6.2",
"xml-js": "1.6.11" "xml-js": "1.6.11"
}, },

@ -11,7 +11,7 @@
:on-exceed="handleExceed" :on-exceed="handleExceed"
name="file" name="file"
:on-remove="handleRemove" :on-remove="handleRemove"
:show-file-list="true" :show-file-list="false"
:headers="headers" :headers="headers"
:file-list="fileList" :file-list="fileList"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
@ -19,7 +19,24 @@
> >
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<ul class="el-upload-list el-upload-list--picture-card">
<draggable v-model="fileList" @end="end" @start="start">
<li v-for="(item, index) in fileList" :key="item.uid" class="el-upload-list__item is-success animated">
<img :src="item.url" alt="" class="el-upload-list__item-thumbnail ">
<i class="el-icon-close"></i>
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span class="el-upload-list__item-preview" @click="handlePictureCardPreviewFileDetail(item)">
<i class="el-icon-zoom-in"></i>
</span>
<!-- 删除 -->
<span class="el-upload-list__item-delete" @click="handleRemoveFileDetail(index)">
<i class="el-icon-delete"></i>
</span>
</span>
</li>
</draggable>
</ul>
<!-- 上传提示 --> <!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip"> <div class="el-upload__tip" slot="tip" v-if="showTip">
请上传 请上传
@ -68,8 +85,11 @@
<script> <script>
import { getAccessToken } from "@/utils/auth"; import { getAccessToken } from "@/utils/auth";
import draggable from 'vuedraggable'
export default { export default {
components: {
draggable,
},
props: { props: {
value: [String, Object, Array], value: [String, Object, Array],
// //
@ -151,7 +171,21 @@ export default {
}, },
}, },
methods: { methods: {
// start(e) {
console.log(this.fileList,e); // fileList
},
end(e) {
this.$emit("input", this.listToString(this.fileList));
},
//
handlePictureCardPreviewFileDetail(file) {
this.dialogImageUrl = file.url;
this.previewDialogVisible = true;
},
//
handleRemoveFileDetail(index) {
this.fileList.splice(index, 1);
}, //
handleRemove(file, fileList) { handleRemove(file, fileList) {
const findex = this.fileList.map(f => f.name).indexOf(file.name); const findex = this.fileList.map(f => f.name).indexOf(file.name);
if (findex > -1) { if (findex > -1) {

@ -21,6 +21,9 @@
:value="dict.value" /> :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" :min="1" :max="999999" placeholder="请输入排序" />
</el-form-item>
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入标题" /> <el-input v-model="formData.title" placeholder="请输入标题" />
</el-form-item> </el-form-item>
@ -90,6 +93,7 @@
logo: undefined, logo: undefined,
image: undefined, image: undefined,
content: undefined, content: undefined,
sort: undefined,
}, },
// //
formRules: { formRules: {
@ -163,6 +167,7 @@
logo: undefined, logo: undefined,
image: undefined, image: undefined,
content: undefined, content: undefined,
sort: undefined,
}; };
this.resetForm("formRef"); this.resetForm("formRef");
} }

@ -10603,9 +10603,9 @@ vue@2.7.14:
"@vue/compiler-sfc" "2.7.14" "@vue/compiler-sfc" "2.7.14"
csstype "^3.1.0" csstype "^3.1.0"
vuedraggable@2.24.3: vuedraggable@^2.24.3:
version "2.24.3" version "2.24.3"
resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz" resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g== integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
dependencies: dependencies:
sortablejs "1.10.2" sortablejs "1.10.2"

Loading…
Cancel
Save