cfn
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

资源选择器

This commit is contained in:
zhang zhuo 2025-11-21 17:45:26 +08:00
parent 1c9f69a53b
commit 09f08bc553
7 changed files with 99 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/model/system.ts
View File

@ -89,6 +89,34 @@ export default {
upload: async function (data, config = {}) {
return await http.post("upload", data, config);
},
asset_category: {
list: async function (data = {}) {
return await http.get("asset_category/list", data);
},
add: async function (data = {}) {
return await http.post("asset_category/add", data);
},
edit: async function (data = {}) {
return await http.put("asset_category/edit", data);
},
del: async function (data = {}) {
return await http.delete("asset_category/del", data);
},
},
asset: {
list: async function (data = {}) {
return await http.get("asset/list", data);
},
move: async function (data = {}) {
return await http.put("asset/move", data);
},
del: async function (data = {}) {
return await http.delete("asset/del", data);
},
upload: async function (data, config = {}) {
return await http.post("asset/upload", data, config);
},
},
monitor: {
server: async function (data, config = {}) {
return await http.get("monitor/server", data, config);

5
src/components/piAsset/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="pi-asset">
<div class="file-item" v-for="(item, index) in value" :key="index" :style="style">
<el-image v-if="obj.isImg(item)" :src="item" :style="style" :preview-src-list="[item]" fit="cover"
<el-image v-if="obj.isImg(item)" :src="config.API_URL + '/' + item" :style="style" :preview-src-list="[config.API_URL + '/' + item]" fit="cover"
preview-teleported :z-index="9999"></el-image>
<pi-player v-else-if="obj.isVideo(item)" :src="item" :options="videoOptions"></pi-player>
<pi-player v-else-if="obj.isVideo(item)" :src="config.API_URL + '/' + item" :options="videoOptions"></pi-player>
<el-icon v-else :style="style" style="color: #409eff;" :size="32">
<component :is="'pi-icon-task'"/>
</el-icon>
@ -26,6 +26,7 @@ import pickerDialog from "./picker.vue";
import assetConfig from "@/config/asset"
import piPlayer from '@/components/piPlayer'
import {nextTick, ref, watch} from "vue";
import config from "@/config"
const emit = defineEmits(['update:modelValue'])
const props = defineProps({

79
src/components/piAsset/picker.vue
View File

@ -14,7 +14,7 @@
{{ node.label }}
</span>
<span class="do">
<el-icon @click.stop="editCategory(data)"><el-icon-edit/></el-icon>
<el-icon v-if="data.category_id != 0" @click.stop="editCategory(data)"><el-icon-edit/></el-icon>
</span>
</span>
</template>
@ -57,7 +57,7 @@
<p>{{ file.name }}</p>
</div>
<div v-for="item in data" :key="item[fileProps.fileName]" class="pi-file-select__item"
:class="{active: value.includes(item[fileProps.url]) }" @click="select(item)">
:class="{active: active(item) }" @click="select(item)">
<div class="pi-file-select__item__file">
<div class="pi-file-select__item__checkbox" v-if="multiple">
<el-icon>
@ -70,7 +70,8 @@
</el-icon>
</div>
<div class="pi-file-select__item__box"></div>
<el-image v-if="obj.isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain"
<el-image v-if="obj.isImg(item[fileProps.url])"
:src="config.API_URL + '/' + item[fileProps.url]" fit="contain"
lazy></el-image>
<div v-else-if="obj.isVideo(item[fileProps.url])" class="item-video">
<el-icon size="32px">
@ -88,7 +89,8 @@
</el-scrollbar>
</div>
<div class="pi-file-select__pagination">
<el-pagination size="small" background layout="prev, pager, next" :total="total" :page-size="pageSize"
<el-pagination size="small" background layout="prev, pager, next" :total="total"
:page-size="pageSize"
v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
</div>
<div class="pi-file-select__do">
@ -108,8 +110,9 @@ import assetConfig from "@/config/asset"
import saveDialog from "./save.vue";
import moveDialog from "./move.vue";
import * as imageConversion from 'image-conversion';
import {ref, onMounted, nextTick, getCurrentInstance} from "vue"
import {ref, onMounted, nextTick, getCurrentInstance, computed} from "vue"
import tools from "@/utils/tools"
import config from "@/config"
defineExpose({
open
@ -164,7 +167,7 @@ async function getMenu() {
const res = await assetConfig.menuListObj();
menu.value = tools.makeTreeData(res.data, 0, "category_id")
menu.value.unshift({
'category_id': '',
'category_id': 0,
'category_name': '未分类',
'pid': 0
})
@ -179,7 +182,7 @@ async function getData() {
[assetConfig.request.pageSize]: pageSize.value,
};
reqData.type = props.type
reqData.file_name = file_name.value
reqData.ori_name = file_name.value
const res = await assetConfig.fileListObj(reqData);
const parseData = assetConfig.listParseData(res);
data.value = parseData.rows
@ -203,37 +206,56 @@ function search() {
getData()
}
function active(item) {
if (props.multiple) {
let choice = false;
value.value.forEach(i => {
if (i[assetConfig.fileProps.id] === item[assetConfig.fileProps.id]) {
choice = true
}
})
return choice
} else {
return value.value[assetConfig.fileProps.id] === item[assetConfig.fileProps.id]
}
}
function select(item) {
const itemUrl = item[fileProps.value.url]
if (props.multiple) {
if (value.value.length >= props.max) {
proxy.$message.error("选择文件过多")
return;
}
if (value.value.includes(itemUrl)) {
value.value.splice(value.value.findIndex(f => f == itemUrl), 1)
if (active(item)) {
value.value.splice(value.value.findIndex(f => f[assetConfig.fileProps.id] === item[assetConfig.fileProps.id]), 1)
} else {
value.value.push(itemUrl)
value.value.push(item)
}
} else {
if (value.value.includes(itemUrl)) {
if (value.value[assetConfig.fileProps.id] === item[assetConfig.fileProps.id]) {
value.value = ''
} else {
value.value = itemUrl
value.value = item
}
}
}
function submit() {
emit('success', value.value);
if (props.multiple) {
emit('success', value.value.map(i => i[assetConfig.fileProps.url]));
} else {
emit('success', value.value[assetConfig.fileProps.url]);
}
visible.value = false
}
async function delFile() {
const _value = JSON.parse(JSON.stringify(value.value))
const url = props.multiple ? _value.toString() : _value;
if (!url) return;
const res = await assetConfig.delFileObj({url: url});
const ids = props.multiple ? _value.map(i => i[assetConfig.fileProps.id]) : [_value[assetConfig.fileProps.id]];
if (!ids) return;
const res = await assetConfig.delFileObj({ids: ids});
// 删除文件成功，取消选择
value.value = props.multiple ? [] : ''
proxy.$message.success(res.msg)
getData()
}
@ -246,11 +268,10 @@ function moveFile() {
}
async function moveSuccess(category_id) {
console.log(category_id)
const _value = JSON.parse(JSON.stringify(value.value))
const url = props.multiple ? _value.toString() : _value;
if (!url) return;
const res = await assetConfig.moveFileObj({url: url, category_id: category_id});
const ids = props.multiple ? _value.map(i=>i[assetConfig.fileProps.id]) :[ _value[assetConfig.fileProps.id]];
if (!ids) return;
const res = await assetConfig.moveFileObj({ids: ids, category_id: category_id});
proxy.$message.success(res.msg)
getData()
}
@ -311,12 +332,9 @@ function clearFiles(file) {
function uploadSuccess(res, file) {
fileList.value.splice(fileList.value.findIndex(f => f.uid == file.uid), 1)
var response = assetConfig.uploadParseData(res);
data.value.unshift({
[fileProps.value.fileName]: response.fileName,
[fileProps.value.url]: response.url
})
data.value.unshift(response)
if (!props.multiple) {
value.value = response.url
value.value = response
}
}
@ -337,13 +355,13 @@ function editCategory(data) {
function addCategory() {
dialog.value.save = true
nextTick(() => {
saveRef.value.open('add',menu.value)
saveRef.value.open('add', menu.value, null, menuRef.value.getCurrentKey())
})
}
async function delCategory() {
var CheckedNodes = menuRef.value.getCheckedNodes()
if (CheckedNodes.length == 0) {
if (CheckedNodes.length === 0) {
proxy.$message.warning("请选择需要删除的项")
return false;
}
@ -354,12 +372,11 @@ async function delCategory() {
confirmButtonClass: 'el-button--danger'
}).catch(() => {
})
if (confirm != 'confirm') {
if (confirm !== 'confirm') {
return false
}
menuLoading.value = true
var ids = CheckedNodes.map(item => item.category_id)
var res = await assetConfig.menuDelObj({ids: ids.toString()})
var res = await assetConfig.menuDelObj({ids: CheckedNodes.map(item => item.category_id)})
menuLoading.value = false
proxy.$message.success(res.msg)
CheckedNodes.forEach(item => {

5
src/components/piAsset/save.vue
View File

@ -59,12 +59,15 @@ let menuProps = ref({
checkStrictly: true
})
function open(_mode = 'add', _menu = null, data = null) {
function open(_mode = 'add', _menu = null, data = null, pid=null) {
mode.value = _mode;
visible.value = true;
if (_menu) {
menu.value = _menu
}
if (pid) {
form.value.pid = pid
}
if (data) {
Object.assign(form.value, data)
}

23
src/config/asset.ts
View File

@ -1,22 +1,22 @@
import api from "@/api";
export default {
uploadObj: api.system.upload,
fileListObj: api.system.file.list,
moveFileObj: api.system.file.move,
delFileObj: api.system.file.del,
menuListObj: api.system.category.list,
menuAddObj: api.system.category.add,
menuEditObj: api.system.category.edit,
menuDelObj: api.system.category.del,
uploadObj: api.system.asset.upload,
fileListObj: api.system.asset.list,
moveFileObj: api.system.asset.move,
delFileObj: api.system.asset.del,
menuListObj: api.system.asset_category.list,
menuAddObj: api.system.asset_category.add,
menuEditObj: api.system.asset_category.edit,
menuDelObj: api.system.asset_category.del,
successCode: 200,
maxSize: 20,
max: 99,
uploadParseData: function (res) {
return {
return Object.assign({
fileName: res.data.fileName,
url: res.data.filePath
}
}, res.data)
},
listParseData: function (res) {
return {
@ -38,7 +38,8 @@ export default {
children: 'children'
},
fileProps: {
fileName: 'file_name',
id: 'asset_id',
fileName: 'ori_name',
url: 'url'
},
fileType(type: string) {

6
src/views/monitor/crontab/save.vue
View File

@ -20,8 +20,7 @@
<el-switch v-model="form.enable" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="备注" prop="memo">
<pi-editor v-model="form.memo"></pi-editor>
<!-- <el-input type="textarea" v-model="form.memo" placeholder="请输入备注" clearable></el-input>-->
<el-input type="textarea" v-model="form.memo" placeholder="请输入备注" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
@ -35,7 +34,8 @@
import {getCurrentInstance, ref} from 'vue'
import api from "@/api/index.js"
import piCron from "@/components/piCron"
import piEditor from "@/components/piEditor"
import piAsset from "@/components/piAsset"
// import piEditor from "@/components/piEditor"
defineExpose({
open

2
src/views/tools/gen/index.vue
View File

@ -46,7 +46,7 @@
</template>
</el-table-column>
</pi-table>
<save-dialog v-if="dialogSave" ref="saveRef" @closed="dialogSave=false"></save-dialog>
<save-dialog v-if="dialogSave" ref="saveRef" @closed="dialogSave=false" @success="tableRef.refresh()"></save-dialog>
<show-dialog v-if="dialogShow" ref="showRef" @closed="dialogShow=false"></show-dialog>
</template>