gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

功能变化: 前端组件优化更新

pull/102/head
李强 2023-07-12 16:43:41 +08:00
parent c41a505e6a
commit d02447cbd5
3 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/file-uploader/lib/file-uploader.vue
View File

@ -56,6 +56,9 @@
<div style="text-align: center" v-if="_elProps.listType === 'avatar'">
<img style="max-width: 100%;" :src="dialogImageUrl" alt="">
</div>
<div style="text-align: center" v-else-if="_elProps.listType === 'picture-card'">
<img style="max-width: 100%;" :src="dialogImageUrl" alt="">
</div>
<div style="text-align: center" v-else>
<div id="player" v-if="dialogVisible">
<div class="player-container">

57
web/src/components/foreign-key-crud-form/foreign-key-crud-form.vue
View File

@ -15,7 +15,7 @@
<el-row style="margin-bottom: 0" :gutter="5" v-for="(field, index) in currentForm.data" :key="index">
<el-col :span="elProps.index.span" v-if="elProps.index">
<div style="text-align: center">
{{index+1}}
{{ index + 1 }}
</div>
</el-col>
<el-col :span="elProps.fields[key].span" v-for="(_,key) in elProps.fields" :key="key">
@ -34,20 +34,23 @@
:value="item.value">
</el-option>
</el-select>
<el-input-number style="width: 100%" v-else-if="elProps.fields[key].type === 'number'" controls-position="right" v-model="field[key]"></el-input-number>
<div v-else-if="elProps.fields[key].type === 'image'" style="height: 30px;width: 30px;">
<d2p-file-uploader v-model="field[key]" :elProps="elProps.fields[key].elProps || { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', limit: 1 }"></d2p-file-uploader>
<el-input-number style="width: 100%" v-else-if="elProps.fields[key].type === 'number'"
controls-position="right" v-model="field[key]"></el-input-number>
<div class="d2p-images" v-else-if="elProps.fields[key].type === 'image'">
<d2p-file-uploader v-model="field[key]"
:elProps="elProps.fields[key].elProps || { listType: 'picture-card', accept: '.png,.jpeg,.jpg,.ico,.bmp,.gif', limit: 1 }"></d2p-file-uploader>
</div>
<!-- 富文本 -->
<span v-else-if="elProps.fields[key].type === 'ueditor'">
<values-popover v-model="field[key]" :elProps="{ type: 'ueditor' }" @previewClick="previewClick(index,key)"></values-popover>
<values-popover v-model="field[key]" :elProps="{ type: 'ueditor' }"
@previewClick="previewClick(index,key)"></values-popover>
</span>
<!-- 多对多 -->
<span v-else-if="elProps.fields[key].type === 'many_to_many'">
<values-popover
v-model="field[key]"
:dict="elProps.fields[key].dict"
:elProps="{ type: elProps.fields[key].value?.type || 'strList', rowKey: elProps.fields[key].value?.rowKey || 'title', label: elProps.value?.title || '答复选项内容' }"
:elProps="{ type: elProps.fields[key].value?.type || 'manyToMany', rowKey: elProps.fields[key].value?.rowKey || 'title', label: elProps.value?.title || '答复选项内容' }"
@listClick="manyToManyClick(index,key)">
</values-popover>
</span>
@ -56,9 +59,11 @@
</el-col>
<el-col :span="4">
<el-form-item>
<el-button @click.prevent="topDomain(index)" :disabled="index === 0" type="primary" circle icon="el-icon-top"></el-button>
<el-button @click.prevent="bottomDomain(index)" :disabled="index === currentForm.data.length - 1" type="primary" circle icon="el-icon-bottom"></el-button>
<el-button @click.prevent="removeDomain(index)" type="danger" circle icon="el-icon-delete"></el-button>
<el-button @click.prevent="topDomain(index)" :disabled="index === 0" type="primary" circle
icon="el-icon-top"></el-button>
<el-button @click.prevent="bottomDomain(index)" :disabled="index === currentForm.data.length - 1"
type="primary" circle icon="el-icon-bottom"></el-button>
<el-button @click.prevent="removeDomain(index)" type="danger" circle icon="el-icon-delete"></el-button>
</el-form-item>
</el-col>
</el-row>
@ -102,6 +107,7 @@
</template>
<script>
import util from '@/libs/util.js'
export default {
name: 'foreignKeyCrudForm',
model: {
@ -346,8 +352,37 @@ export default {
}
}
</script>
<style scoped>
::v-deep .d2p-file-uploader .el-upload--picture-card{
<style lang="scss">
.d2p-images {
height: 30px;
width: 30px;
.el-upload-list__item-thumbnail {
height: 60px !important;
width: 60px !important;
}
.el-upload-list__item {
width: 60px !important;
height: 60px !important;
line-height: 0 !important;
img {
height: 60px !important;
width: 60px !important;
}
}
.el-upload-list__item-actions {
height: 60px !important;
width: 60px !important;
line-height: 0 !important;
}
}
</style>
<style lang="scss" scoped>
::v-deep .d2p-file-uploader .el-upload--picture-card {
width: 50px;
height: 50px;
}

24
web/src/components/values-popover/values-popover.vue
View File

@ -36,6 +36,30 @@
</el-descriptions-item>
</el-descriptions>
</div>
<div v-if="elProps.type === 'manyToMany'">
<el-popover
placement="right"
width="300"
trigger="hover"
v-if="value.length > 0"
@show="showEvents"
@hide="show=false">
<el-descriptions class="margin-top" :column="1" size="mini" border>
<el-descriptions-item v-for="(item,index) in value" :key="index" labelStyle="width: 60px;">
<template slot="label">
选项{{ index + 1 }}
</template>
{{ item[dict.label] }}
</el-descriptions-item>
</el-descriptions>
<el-button type="primary" plain size="mini" slot="reference" @click="listClick"><span> {{ value.length }} {{ elProps.unit }}</span>
</el-button>
</el-popover>
<el-button v-else type="primary" plain size="mini" slot="reference" @click="listClick"><span> {{
value.length
}} {{ elProps.unit }}</span>
</el-button>
</div>
<div v-else-if="elProps.type === 'ueditor'">
<el-popover
placement="right"