Skip to content

C
cy-admin-ui
Commit 1b956aa6 authored by 廖伟胜's avatar 廖伟胜
Browse files
Options

修改文件组件（差音频组件）

parent 5ca77c4e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1355 additions and 223 deletions
packages/form/upload/src/base-upload.vue 0 → 100644
View file @ 1b956aa6
This diff is collapsed.
packages/form/upload/src/upload-file.vue
View file @ 1b956aa6
<template>
<div>
文件上传
<div class="upload-imags-list">
<div class="img-box" >
<UploadImg
v-model="list"
:multiple="multiple"
:show-del="false"
:tips="tips"
:limit="limit"
:uploadType="uploadType"
:showDel="showDel"
:label="label"
:source="source"
:size="size"
:edit="edit"
:dialog="dialog"
class="uploadImg"/>
</div>
</div>
</template>
<script>
export default {
import UploadImg from './base-upload'
export default{
name: 'CyUploadImgList',
components: {
UploadImg,
},
props: {
label: {
type: String,
default: '上传',
},
limit: { // 文件上传数量限制，默认10
type: Number,
default: 10,
},
//是否删除
showDel:{
type: Boolean,
default: true,
},
//上传类型
uploadType:{
type: String,
default: 'file'
},
value: {
type: [String, Object, Array],
default: null,
},
edit: { // 是否可编辑
type: Boolean,
default: true,
},
// 是否使用文件库组件
dialog: {
type: Boolean,
default: true,
},
//是否多选文件
multiple:{
type: Boolean,
default:false
},
// 文件列表数据结构，json，array，string
dataType: {
type: String,
default: 'string',
},
tips: {
type: String,
default: '',
},
source: { // 上传服务器
type: String,
default: 'local', // local：本站点，qiniu：七牛云，oss：阿里云，tencent：腾讯云
},
// 组件大小
size: {
type: Number,
default: 100,
},
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
},
data() {
return {}
return {
dialog_visible: false,
qiniuToken: '',
list: [], // 文件列表
index: '',
}
},
watch: {
value(value) {
this.list = this.init().data(value)
},
list(value) {
const data = this.init().value(value)
this.$emit('input', data)
},
},
created() {
this.list = this.init().data(this.value)
},
methods: {
init() {
return {
// 初始化返回数据
value: (list) => {
let value = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
value = list.join(',')
break
case 'json':
value = JSON.stringify(list)
break
case 'array':
value = list
break
}
return value
},
// 初始化数据
data: (value) => {
let data = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : []
break
case 'json':
data = value ? JSON.parse(value) : []
break
case 'array':
data = value
break
}
data = Array.isArray(data) ? data : []
return data
},
}
},
handler() {
return {
upload: (key) => {
this.list.push(key)
},
choiceImg: (index) => {
if (!this.edit) {
return
}
this.index = index
this.$refs.uploadImg.show()
},
confirm: (data) => {
const { index, limit } = this
let { list } = this
if (index === '') {
list = list.concat(data)
} else {
list.splice(index, 1, data)
}
this.list = list.slice(0, limit)
const value = this.init().value(this.list)
this.$emit('input', value)
},
}
},
},
}
</script>
<style lang="scss" scoped>
.upload-imags-list{
font-size: 0;
.avatar-uploader{
display: block;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
.img-box{
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 4px;
position: relative;
.delete-icon{
position: absolute;
top: 0;
right: 0;
font-size: 16px;
background: red;
color: white;
border-radius: 4px;
z-index: 100;
cursor: pointer;
}
.img{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
}
.avatar-uploader-icon{
box-sizing: border-box;
}
}
}
</style>
packages/form/upload/src/upload-img-list.vue
View file @ 1b956aa6
......@@ -3,14 +3,18 @@
<div v-for="(item, index) in list" :key="index" class="avatar-uploader img">
<div class="img-box" >
<i v-if="edit" class="el-icon-close delete-icon" title="删除" @click.stop="list.splice(index, 1)"/>
<UploadImg
v-model="list[index]"
<uploadimg
v-model="list"
:multiple="false"
:show-del="false"
:tips="tips"
:source="source"
:uploadstyle="uploadstyle"
:datatype="datatype"
:listtype="listtype"
:size="size"
class="uploadImg"/>
class="uploadimg">
</uploadimg>
</div>
</div>
<div v-if="list.length < limit && edit" class="avatar-uploader" >
......@@ -22,6 +26,10 @@
:tips="tips"
:source="source"
:size="size"
v-model="value"
:dataType="dataType"
:uploadStyle="uploadStyle"
:listType="listType"
class="uploadImg"
@on-success="(e) => handler().upload(e)"/>
</div>
......@@ -32,7 +40,7 @@
import UploadImg from './upload-img'
export default{
name: 'CyUpload',
name: 'CyUploadImg',
components: {
UploadImg,
},
......@@ -43,7 +51,7 @@ export default{
},
limit: { // 图片上传数量限制，默认10
type: Number,
default: 1,
default: 10,
},
value: {
type: null,
......@@ -76,6 +84,16 @@ export default{
type: Number,
default: 100,
},
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
},
data() {
return {
......@@ -95,7 +113,7 @@ export default{
},
},
created() {
this.list = this.init().data(this.value)
this.list = this.init().data(this.value);
},
methods: {
init() {
......
packages/form/upload/src/upload-img.vue
View file @ 1b956aa6
This diff is collapsed.
packages/form/upload/src/upload-video.vue 0 → 100644
View file @ 1b956aa6
<template>
<div class="upload-imags-list">
<div class="img-box" >
<UploadImg
v-model="list"
:multiple="multiple"
:show-del="false"
:tips="tips"
:limit="limit"
:uploadType="uploadType"
:showDel="showDel"
:label="label"
:source="source"
:size="size"
:edit="edit"
:dialog="dialog"
class="uploadImg"/>
</div>
</div>
</template>
<script>
import UploadImg from './base-upload'
export default{
name: 'CyUploadImgList',
components: {
UploadImg,
},
props: {
label: {
type: String,
default: '上传',
},
limit: { // 视频上传数量限制，默认10
type: Number,
default: 10,
},
//上传类型
uploadType:{
type: String,
default: 'video'
},
value: {
type: [String, Object, Array],
default: null,
},
edit: { // 是否可编辑
type: Boolean,
default: true,
},
// 是否使用视频库组件
dialog: {
type: Boolean,
default: true,
},
// 视频列表数据结构，json，array，string
dataType: {
type: String,
default: 'string',
},
tips: {
type: String,
default: '',
},
source: { // 上传服务器
type: String,
default: 'local', // local：本站点，qiniu：七牛云，oss：阿里云，tencent：腾讯云
},
// 组件大小
size: {
type: Number,
default: 200,
},
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
},
data() {
return {
dialog_visible: false,
qiniuToken: '',
list: [], // 文件列表
index: '',
}
},
watch: {
value(value) {
this.list = value;
},
list(value) {
const data = this.init().value(value)
this.$emit('input', data)
},
},
created() {
this.list = this.init().data(this.value)
},
methods: {
init() {
return {
// 初始化返回数据
value: (list) => {
let value = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
value = list.join(',')
break
case 'json':
value = JSON.stringify(list)
break
case 'array':
value = list
break
}
return value
},
// 初始化数据
data: (value) => {
let data = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : []
break
case 'json':
data = value ? JSON.parse(value) : []
break
case 'array':
data = value
break
}
data = Array.isArray(data) ? data : []
return data
},
}
},
handler() {
return {
upload: (key) => {
this.list.push(key)
},
choiceImg: (index) => {
if (!this.edit) {
return
}
this.index = index
this.$refs.uploadImg.show()
},
confirm: (data) => {
const { index, limit } = this
let { list } = this
if (index === '') {
list = list.concat(data)
} else {
list.splice(index, 1, data)
}
this.list = list.slice(0, limit)
const value = this.init().value(this.list)
this.$emit('input', value)
},
}
},
},
}
</script>
<style lang="scss" scoped>
.upload-imags-list{
font-size: 0;
.avatar-uploader{
display: block;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
.img-box{
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 4px;
position: relative;
.delete-icon{
position: absolute;
top: 0;
right: 0;
font-size: 16px;
background: red;
color: white;
border-radius: 4px;
z-index: 100;
cursor: pointer;
}
.img{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
}
.avatar-uploader-icon{
box-sizing: border-box;
}
}
}
</style>
packages/form/upload/src/upload.vue
View file @ 1b956aa6
<template>
<div class="upload-imags-list">
<div class="img-box" >
<UploadImg
v-model="list"
:multiple="multiple"
:show-del="false"
:tips="tips"
:limit="limit"
:uploadType="uploadType"
:showDel="showDel"
:label="label"
:source="source"
:size="size"
:edit="edit"
:dialog="dialog"
class="uploadImg"/>
</div>
</div>
</template>
<script>
import UploadImg from './base-upload'
export default{
name: 'Upload',
components: {
UploadImg,
},
props: {
label: {
type: String,
default: '上传',
},
limit: { // 文件上传数量限制，默认10
type: Number,
default: 10,
},
//是否删除
showDel:{
type: Boolean,
default: true,
},
//上传类型
uploadType:{
type: String,
default: 'file'
},
value: {
type: [String, Object, Array],
default: null,
},
edit: { // 是否可编辑
type: Boolean,
default: true,
},
// 是否使用文件库组件
dialog: {
type: Boolean,
default: true,
},
//是否多选文件
multiple:{
type: Boolean,
default:false
},
// 文件列表数据结构，json，array，string
dataType: {
type: String,
default: 'string',
},
tips: {
type: String,
default: '',
},
source: { // 上传服务器
type: String,
default: 'local', // local：本站点，qiniu：七牛云，oss：阿里云，tencent：腾讯云
},
// 组件大小
size: {
type: Number,
default: 100,
},
//上传组件风格
uploadStyle:{
type:String,
default:'icon'
},
//文件样式
listType:{
type:String,
default:''
},
},
data() {
return {
dialog_visible: false,
qiniuToken: '',
list: [], // 文件列表
index: '',
}
},
watch: {
value(value) {
this.list = this.init().data(value)
},
list(value) {
const data = this.init().value(value)
this.$emit('input', data)
},
},
created() {
this.list = this.init().data(this.value)
},
methods: {
init() {
return {
// 初始化返回数据
value: (list) => {
let value = ''
const { dataType } = this
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
value = list.join(',')
break
case 'json':
value = JSON.stringify(list)
break
case 'array':
value = list
break
}
return value
},
// 初始化数据
data: (value) => {
let data = ''
const { dataType } = this
if(value != null){
switch(dataType) {
case 'string': // 字符串类型以逗号隔开
data = value ? value.split(',') : []
break
case 'json':
data = value ? JSON.parse(value) : []
break
case 'array':
data = value
break
}
}
data = Array.isArray(data) ? data : []
return data
},
}
},
handler() {
return {
upload: (key) => {
this.list.push(key)
},
choiceImg: (index) => {
if (!this.edit) {
return
}
this.index = index
this.$refs.uploadImg.show()
},
confirm: (data) => {
const { index, limit } = this
let { list } = this
if (index === '') {
list = list.concat(data)
} else {
list.splice(index, 1, data)
}
this.list = list.slice(0, limit)
const value = this.init().value(this.list)
this.$emit('input', value)
},
}
},
},
}
</script>
<style lang="scss" scoped>
.upload-imags-list{
font-size: 0;
.avatar-uploader{
display: block;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
.img-box{
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 4px;
position: relative;
.delete-icon{
position: absolute;
top: 0;
right: 0;
font-size: 16px;
background: red;
color: white;
border-radius: 4px;
z-index: 100;
cursor: pointer;
}
.img{
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
}
.avatar-uploader-icon{
box-sizing: border-box;
}
}
}
</style>
packages/layout/src/layout-form.vue
View file @ 1b956aa6
......@@ -17,14 +17,55 @@
v-model="form[item.field]">
<el-radio v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.value">{{ option.label }}</el-radio>
</el-radio-group>
<el-checkbox v-else-if="item.type === 'checkbox'"
v-model="form[item.field]"
:label="item.label" :border="item.border != null ? item.border : false"
:size="item.size != null ? item.size : null"
:name="item.name" :disabled="item.disabled != null ? item.disabled : false"></el-checkbox>
<el-checkbox-group
v-else-if="item.type === 'checkbox-group'"
v-model="form[item.field]"
:size="item.size != null ? item.size : null"
:min="item.checkboxGroup.min != null ? item.checkboxGroup.min : 0"
:max="item.checkboxGroup.max != null ? item.checkboxGroup.max : 100"
>
<el-checkbox v-show="item.checkboxGroup.type != 'button'"
v-for="(option, optionIndexs) in item.options"
:disabled="option.disabled != null ? option.disabled : false"
:border="option.border != null ? option.border : false"
:key="optionIndexs+'checkbox'"
:label="option.label"
:name="option.name"/>
<el-checkbox-button v-show="item.checkboxGroup.type == 'button'"
v-for="(option, optionIndex) in item.options"
:disabled="option.disabled != null ? option.disabled : false"
:border="option.border != null ? option.border : false"
:key="optionIndex+'checkbox-button'"
:label="option.label"
:name="option.name"/>
</el-checkbox-group>
<div v-else-if="handler().uploadType(item)" style="display: inline-block;">
<cy-upload
<cyupload
:ref="form[item.field]"
v-model="form[item.field]"
:uploadType="item.type"
:limit="(item.upload && item.upload.limit) || 1"
:size="(item.upload && item.upload.size) || 100"
:dataType="(item.upload && item.upload.dataType) || 'array'"
:edit="(item.upload && item.upload.edit) || true"
:showDel="(item.upload && item.upload.showDel) || true"
:label="(item.upload && item.upload.label) || ''"
:multiple="(item.upload && item.upload.multiple) || false"
:tips="(item.upload && item.upload.tips) || ''"
:source="(item.upload && item.upload.source) || ''"
/>
<!-- <cy-upload
:ref="form[item.field]"
:type="item.type"
:limit="(item.upload && item.upload.limit) || 1"
:size="(item.upload && item.upload.size) || 100"
:dataType="(item.upload && item.upload.dataType) || 'string'"
v-model="form[item.field]" />
v-model="form[item.field]" /> -->
</div>
<el-date-picker
v-else-if="item.type === 'date'"
......@@ -33,6 +74,7 @@
value-format="yyyy-MM-dd"
class="input"
type="date"/>
<slot v-else-if="item.type == 'slot'" :name="item.slotName" :field="item" :form="form" :index="index"/>
<el-input
v-else
......@@ -67,7 +109,13 @@
<script>
import request from '@/utils/request'
import { getDicts } from '@/api/system/dict/data'
import uploadImg from '../../form/upload/src/upload-img'
import uploadFile from '../../form/upload/src/upload-file'
import Cyupload from '../../form/upload/src/upload'
export default {
components:{
uploadImg,uploadFile,Cyupload
},
props: {
primaryKey: {
type: String,
......@@ -89,6 +137,9 @@ export default {
},
loading: false, // 控制表格的加载状态
saveLoading: false, // 保存状态
video:[{url:"https://vd4.bdstatic.com/mda-kb5mi75zvcx94wir/v1-cae/sc/mda-kb5mi75zvcx94wir.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1644909031-0-0-fc3f17824543985f4541f98638fb95a9&bcevod_channel=searchbox_feed&pd=1&pt=3&logid=2431577623&vid=4581260007125923518&abtest=&klogid=2431577623"},{url:"https://vd4.bdstatic.com/mda-kb5mi75zvcx94wir/v1-cae/sc/mda-kb5mi75zvcx94wir.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1644909031-0-0-fc3f17824543985f4541f98638fb95a9&bcevod_channel=searchbox_feed&pd=1&pt=3&logid=2431577623&vid=4581260007125923518&abtest=&klogid=2431577623"}],
fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
list: [{url: 'https://lmg.jj20.com/up/allimg/4k/s/01/210924112Q25J9-0-lp.jpg'},{ url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
}
},
computed: {
......@@ -207,9 +258,12 @@ export default {
return
}
fieldList.forEach(item => {
const { field, type, } = item
let { value, placeholder, attr, dict, } = item
const { field, type } = item
let { value, placeholder, attr, checkboxGroup,dict,options } = item
console.log(options);
console.log(value);
attr = attr || {}
checkboxGroup = checkboxGroup || {}
if (!placeholder) {
switch (type) {
case 'select': case 'radio':
......@@ -236,11 +290,12 @@ export default {
}
}
value = value || ''
value = type == 'checkbox-group' ? (value || []) : (value || '')
// value = value || ''
attr.placeholder = placeholder
item.attr = attr
item.checkboxGroup = checkboxGroup
item.change = item.change || (() => {})
form[field] = value
})
form[primaryKey] = data[primaryKey]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment