赋能案例-后台管理系统

This commit is contained in:
851673013@qq.com 2022-06-22 14:09:52 +08:00
parent 46c1cc68ed
commit 11b2536c5c
6 changed files with 1032 additions and 1402 deletions

View File

@ -1,980 +0,0 @@
<template>
<div>
<el-dialog
:visible.sync="visible"
:title="disabled ? '能力展示' : '挂接'"
@close="guanbi"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<!-- 挂载和修改-->
<div key="1" v-if="!disabled">
<!-- 挂载-->
<div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">填写字段</div>
<el-checkbox-group v-model="checkList" @change="showListChagne" style="margin-bottom:20px;">
<el-checkbox-button v-for="item in dataForm.showListAll" :label="item.name" :key="item.id">{{item.name}}</el-checkbox-button>
</el-checkbox-group>
<el-form
v-if="!UpdateState"
:model="dataForm"
:rules="rules"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
>
<div v-show="checkList.indexOf('必填信息')>-1">
<div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">必填信息</div>
<el-form-item label="应用名称" prop="name">
<el-input v-model="dataForm.name" placeholder="请输入组件名称" ></el-input>
</el-form-item>
<el-form-item label="应用描述" prop="description">
<el-input v-model="dataForm.description" placeholder="请输入组件描述" ></el-input>
</el-form-item>
<el-form-item label="部门联系人" prop="deptContacts">
<el-input v-model="dataForm.deptContacts" placeholder="请输入部门联系人" ></el-input>
</el-form-item>
<el-form-item label="部门联系人电话" prop="deptPhone">
<el-input v-model="dataForm.deptPhone" placeholder="请输入部门联系人电话" ></el-input>
</el-form-item>
<el-form-item label="共享条件" prop="shareCondition">
<el-select
v-model="dataForm.shareCondition"
placeholder="请选择共享条件"
>
<el-option
v-for="val in typeOptions"
:key="val.value"
:label="val.label"
:value="val.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="共享类型" prop="shareType"><el-select
v-model="dataForm.shareType"
placeholder="请选择共享类型"
>
<el-option
v-for="val in conditionOptions"
:key="val.value"
:label="val.label"
:value="val.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="共享方式" prop="shareMode">
<el-input v-model="dataForm.shareMode" placeholder="请输入共享方式" ></el-input>
</el-form-item>
</div>
<div v-for="item in dataForm.showList" :key="item.id" v-show="item.name !== '必填信息'">
<div style="text-align:center;font-weight: 600;font-size: 18px;margin-bottom: 10px;">{{item.name}}</div>
<el-form-item :label="child.name" v-for="child in item.children" :key="child.id" v-show="item.children">
<el-input v-model="child.note1" :placeholder="'请输入'+child.name" v-if="child.type=='input'"></el-input>
<el-input v-model="child.note1" :placeholder="'请输入'+child.name" type="textarea" :rows="2" v-if="child.type=='textArea'"></el-input>
<el-select
v-else-if="child.type=='select'"
v-model="child.note1"
:placeholder="'请选择' + child.name"
>
<el-option
v-for="val in child.options"
:key="val"
:label="val"
:value="val"
>
</el-option>
</el-select>
<upload v-else-if="child.type=='images'" :child='child' limit='5' accept='.jpg,.png'></upload>
<upload v-else-if="child.type=='image'" :child='child' limit='1' accept='.jpg,.png'></upload>
<upload v-else-if="child.type=='video'" :child='child' limit='1' accept='.mp4'></upload>
</el-form-item>
</div>
</el-form>
<!-- 修改-->
<el-form
v-else
:model="dataFormUpdate"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
>
<el-form-item label="应用名称">
<el-input
v-model="dataFormUpdate.name"
placeholder="应用名称"
></el-input>
</el-form-item>
<el-form-item label="应用描述">
<el-input
v-model="dataFormUpdate.description"
placeholder="应用描述"
></el-input>
</el-form-item>
<el-form-item label="访问地址">
<el-input
v-model="dataFormUpdate.link"
placeholder="访问地址"
></el-input>
</el-form-item>
<el-form-item label="部门联系人">
<el-input
v-model="dataFormUpdate.deptContacts"
placeholder="部门联系人"
></el-input>
</el-form-item>
<el-form-item label="部门联系人电话">
<el-input
v-model="dataFormUpdate.deptPhone"
placeholder="部门联系人电话"
></el-input>
</el-form-item>
<el-form-item label="共享类型">
<el-select v-model="dataFormUpdate.shareType" placeholder="请选择">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<!-- <el-input v-model="dataFormUpdate.shareType" placeholder="共享类型"></el-input> -->
</el-form-item>
<el-form-item label="共享条件">
<el-select
v-model="dataFormUpdate.shareCondition"
placeholder="请选择"
>
<el-option
v-for="item in conditionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<!-- <el-input v-model="dataFormUpdate.shareCondition" placeholder="共享条件"></el-input> -->
</el-form-item>
<el-form-item label="共享方式">
<el-input
v-model="dataFormUpdate.shareMode"
placeholder="共享方式"
></el-input>
</el-form-item>
<el-form-item label="服务接口">
<el-input
v-model="dataFormUpdate.apiUrl"
placeholder="服务接口"
></el-input>
</el-form-item>
<el-form-item label="服务接口请求方式">
<el-input
v-model="dataFormUpdate.apiMethodType"
placeholder="服务接口请求方式"
></el-input>
</el-form-item>
<el-form-item
v-for="item in dataFormUpdate.infoList"
:key="item.index"
:label="item.attrType"
>
<el-input
v-model="item.attrValue"
:placeholder="item.attrType"
v-if="
item.attrType != '应用领域' &&
item.attrType != '应用类型' &&
item.attrType != '发布端' &&
item.attrType != '应用状态'
"
></el-input>
<el-select
v-else
v-model="item.attrValue"
:placeholder="item.attrType"
>
<el-option
:value="item2.dictLabel"
v-for="item2 in item.children"
:key="item2.id"
:label="item2.dictLabel"
></el-option>
</el-select>
<!-- <el-upload
v-if="item.attrType == '应用图片'"
ref="addUpload"
class="upload-demo"
:action="fileUploadUrl"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-remove="addUploadRemoveFile"
:on-preview="showView"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件且不超过200M
</div>
</el-upload> -->
</el-form-item>
</el-form>
</div>
<!-- 展示 -->
<el-form
key="2"
class="detial-form"
v-else
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
>
<el-form-item label="应用名称" prop="name">
{{ dataFormShowDetails.name || "--" }}
</el-form-item>
<el-form-item label="应用描述">
{{ dataFormShowDetails.description || "--" }}
</el-form-item>
<el-form-item label="访问地址">
{{ dataFormShowDetails.link || "--" }}
</el-form-item>
<el-form-item label="部门联系人">
{{ dataFormShowDetails.deptContacts || "--" }}
</el-form-item>
<el-form-item label="部门联系人电话">
{{ dataFormShowDetails.deptPhone || "--" }}
</el-form-item>
<el-form-item label="共享类型">
{{ dataFormShowDetails.shareType || "--" }}
</el-form-item>
<el-form-item label="共享条件">
{{ dataFormShowDetails.shareCondition || "--" }}
</el-form-item>
<el-form-item label="共享方式">
{{ dataFormShowDetails.shareMode || "--" }}
</el-form-item>
<el-form-item label="服务接口">
{{ dataFormShowDetails.apiUrl || "--" }}
</el-form-item>
<el-form-item label="服务接口请求方式">
{{ dataFormShowDetails.apiMethodType || "--" }}
</el-form-item>
<el-form-item
v-for="item in dataFormShowDetails.infoList"
:key="item.index"
:label="item.attrType"
:prop="item.attrValue"
>
{{ item.attrValue || "--" }}
</el-form-item>
</el-form>
<template slot="footer" v-if="!disabled">
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
<div>
<el-dialog :visible.sync="dialogVisibleImg">
<img width="100%" :src="previewImg" />
</el-dialog>
</div>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
import dictionaries from '@/utils/dictionaries'
import { mapState } from 'vuex'
import { getIconList } from '@/utils'
import Cookies from 'js-cookie'
import upload from './upload.vue'
import bus from '@/views/bus.js'
import qs from 'qs'
import Vue from 'vue'
export default {
components: {
upload
},
data () {
return {
checkList: [],
dialogVisibleImg: false,
previewImg: '', //
dialogVisible: false,
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
uploadUrl:
window.SITE_CONFIG.apiURL +
'/sys/oss/upload?token=' +
Cookies.get('ucsToken'),
companyArr: dictionaries.companyArr,
visible: false,
sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr,
shareTypeArr: dictionaries.shareTypeArr,
iconList: [],
iconListVisible: false,
menuListVisible: false,
UpdateState: false,
dataForm: {
id: '',
deptId: '',
deptContacts: '',
deptPhone: '',
dataVolume: '',
shareCondition: '',
shareType: '',
shareMode: '',
delFlag: 0,
description: '',
downloads: 0,
image: '',
showList: [],
infoList: [],
link: '',
name: '',
note1: '',
note2: '',
note3: '',
note4: '',
note5: '',
score: '',
type: '应用资源',
apiMethodType: '',
apiUrl: '',
visits: 0
},
deptId: '',
fangwendizhi: '',
mingzi: '',
dataFormUpdate: {},
dataFormShowDetails: {},
infoList2: [],
infoList3: [],
typeOptions: [
{ value: '有条件共享', label: '有条件共享' },
{ value: '无条件共享', label: '无条件共享' }
],
conditionOptions: [
{ value: '申请', label: '申请' },
{ value: '免批申请', label: '免批申请' }
],
rules: {
name: [
{
required: true,
message: '请输入应用名称',
trigger: 'change'
}
],
description: [
{
required: true,
message: '请输入应用描述',
trigger: 'change'
}
],
deptContacts: [
{
required: true,
message: '请输入部门联系人',
trigger: 'change'
}
],
deptPhone: [
{
required: true,
message: '请输入部门联系人电话',
trigger: 'change'
}
],
shareCondition: [
{
required: true,
message: '请选择共享条件',
trigger: 'change'
}
],
shareType: [
{
required: true,
message: '请选择请输入共享类型',
trigger: 'change'
}
],
shareMode: [
{
required: true,
message: '请输入共享方式',
trigger: 'change'
}
]
}
}
},
props: {
disabled: {
type: Boolean,
default: false
}
},
computed: {
...mapState(['catalogueTree']),
...mapState(['departmentSelects']),
dataRule () {
return {
name: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
version: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
visitUrl: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
type: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
shareType: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
shareForm: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
field: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
scene: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
deptId: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
content: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
rank: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
useInfo: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
remarks: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
],
isUp: [
{
required: true,
message: this.$t('validate.required'),
trigger: 'blur'
}
]
}
}
},
methods: {
//
handleAvatarSuccess (res, file) {
if (res.code !== 0) {
return this.$message.error('上传图片失败')
}
debugger
this.dataForm.infoList.map((item, index) => {
if (item.attrType == '应用图片') {
if (!this.dataForm.infoList[index].attrValue) {
this.dataForm.infoList[index].attrValue = res.data
} else {
this.dataForm.infoList[index].attrValue += ';' + res.data
}
console.log('上传图片', this.dataForm.infoList[index])
}
})
// this.imageUrl = URL.createObjectURL(file.raw);
},
handleAvatarSuccessone (res, file) {
if (res.code !== 0) {
return this.$message.error('上传图片失败')
}
debugger
this.dataForm.infoList.map((item, index) => {
if (item.attrType == '子系统一图片') {
if (!this.dataForm.infoList[index].attrValue) {
this.dataForm.infoList[index].attrValue = res.data
} else {
this.dataForm.infoList[index].attrValue = ''
this.dataForm.infoList[index].attrValue = res.data
}
console.log('上传图片', this.dataForm.infoList[index])
}
})
// this.imageUrl = URL.createObjectURL(file.raw);
},
handleAvatarSuccesstwo (res, file) {
if (res.code !== 0) {
return this.$message.error('上传图片失败')
}
debugger
this.dataForm.infoList.map((item, index) => {
if (item.attrType == '子系统二图片') {
if (!this.dataForm.infoList[index].attrValue) {
this.dataForm.infoList[index].attrValue = res.data
} else {
this.dataForm.infoList[index].attrValue = ''
this.dataForm.infoList[index].attrValue = res.data
}
console.log('上传图片', this.dataForm.infoList[index])
}
})
// this.imageUrl = URL.createObjectURL(file.raw);
},
handleAvatarSuccessthree (res, file) {
if (res.code !== 0) {
return this.$message.error('上传图片失败')
}
debugger
this.dataForm.infoList.map((item, index) => {
if (item.attrType == '子系统三图片') {
if (!this.dataForm.infoList[index].attrValue) {
this.dataForm.infoList[index].attrValue = res.data
} else {
this.dataForm.infoList[index].attrValue = ''
this.dataForm.infoList[index].attrValue = res.data
}
console.log('上传图片', this.dataForm.infoList[index])
}
})
// this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload (file) {
const isImage =
file.type === 'image/jpeg' ||
file.type === 'image/jpg' ||
file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 9999
if (!isImage) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isImage && isLt2M
},
addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles()
this.addDataFrom.imageUrl = ''
},
showView (file) {
this.previewImg = file.url
this.dialogVisibleImg = true
},
//
getUserInfo () {
this.$http.get('/sys/user/info').then(({ data: res }) => {
this.dataForm.deptId = res.data.deptId
this.deptId = res.data.deptId
console.log('depid', this.dataForm)
})
},
guanbi () {
this.dataForm = {
id: '',
deptId: '',
deptContacts: '',
deptPhone: '',
dataVolume: '',
shareCondition: '',
shareType: '',
shareMode: '',
delFlag: 0,
description: '',
downloads: 0,
image: '',
showList: [],
infoList: [],
link: '',
name: '',
note1: '',
note2: '',
note3: '',
note4: '',
note5: '',
score: '',
type: '应用资源',
apiMethodType: '',
apiUrl: '',
visits: 0
}
},
handleRemove (file, fileList) {
console.log(file, fileList)
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
//
uploadBeforeUploadHandle (file) {
if (
file.type !== 'image/jpg' &&
file.type !== 'image/jpeg' &&
file.type !== 'image/png' &&
file.type !== 'image/gif'
) {
this.$message.error('只支持jpg、png、gif格式的图片')
return false
}
},
imgUploadSuccess (res, file, fileList) {
console.log('zzzzzzz', res, file, fileList)
if (res.code !== 0) {
return this.$message.error(res.msg)
}
},
init () {
this.getInfoList()
this.visible = true
this.$nextTick(() => {
this.$refs.dataForm && this.$refs.dataForm.resetFields()
this.iconList = getIconList()
if (this.dataForm.id) {
this.getInfo()
}
})
},
//
getInfoList () {
const parms = {
topCategoryName: '应用资源'
}
this.infoList2 = []
this.$http
.get('/category/getAllFiledByTopCategory' + '?' + qs.stringify(parms))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
res.data.map((item, index) => {
if (
item.name.search('应用名称') == -1 &&
item.name.search('地址') == -1 &&
// item.name.search("") == -1 &&
item.name !== '组件描述' &&
item.name !== '组件名称' &&
item.name !== '服务接口' &&
item.name !== '共享类型' &&
item.name !== '共享条件' &&
item.name !== '共享方式' &&
item.name !== '部门联系人电话' &&
item.name !== '部门统一社会代码' &&
item.name !== '部门联系人' &&
item.name !== '服务商统一社会信用代码' &&
item.name !== '服务接口请求方式' &&
item.name !== '部门名称'
) {
const duixiang = {
attrType: item.name,
attrValue: '',
delFlag: 0
}
this.infoList2.push(item)
if (item.isLinkToDic != 'false') {
const xinxi = {
page: 1,
limit: 99,
dictTypeId: item.linkValue,
dictLabel: '',
dictValue: ''
}
this.$http
.get('/sys/dict/data/page' + '?' + qs.stringify(xinxi))
.then(({ data: res2 }) => {
// this.infoList2[index - 1].children = res2.data.list
this.infoList2.map((item3, index3) => {
if (item3.name == item.name) {
Vue.set(
this.infoList2[index3],
'children',
res2.data.list
)
}
})
this.dataFormUpdate.infoList.map((item3, index3) => {
if (item3.attrType == item.name) {
Vue.set(
this.dataFormUpdate.infoList[index3],
'children',
res2.data.list
)
}
})
console.log(
'11111111111111111111111111110',
this.dataFormUpdate
)
})
}
this.dataForm.infoList.push(duixiang)
}
})
console.log('this.infoList', this.dataFormUpdate)
})
.catch(() => {})
this.$http
.get('/sys/dict/data/page' + '?' + qs.stringify(parms))
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
console.log('this.infoList', this.dataForm)
})
.catch(() => {})
},
// ,
iconListCurrentChangeHandle (icon) {
this.dataForm.imgurl = icon
this.iconListVisible = false
},
// ,
menuListTreeCurrentChangeHandle (data) {
this.dataForm.pid = data.id
this.dataForm.type = data.name
this.menuListVisible = false
},
// ,
deptListTreeSetDefaultHandle () {
this.dataForm.pid = '0'
this.dataForm.type = '目录级别'
},
//
getInfo () {
this.$http
.get('/ability/bsabilityai/' + this.dataForm.id)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
})
.catch(() => {})
},
//
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
this.getUserInfo()
this.dataForm.deptId = this.deptId
if (!valid) {
this.$message.error('请检查表单是否填写完整')
return false
}
console.log('表单数据=======================》', this.dataForm)
if (!this.UpdateState) {
this.dataForm.infoList = []
this.dataForm.showListAll.forEach(val => {
if (val.name !== '必填信息') {
if (val.name === '服务接口信息') {
val.children.forEach(item => {
if (item.name === '服务接口') {
this.dataForm.apiUrl = item.note1
}
if (item.name === '接口请求方式') {
this.dataForm.apiMethodType = item.note1
}
if (item.name === '访问地址') {
this.dataForm.link = item.note1
}
})
} else {
val.children.forEach(item => {
this.dataForm.infoList.push({
attrType: item.name,
attrValue: item.note1,
delFlag: 0
})
})
}
}
})
this.$http
.post('/resource/insert?source= b', this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
.catch(() => {})
} else {
this.$http
.put('/resource/update', this.dataFormUpdate)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
})
.catch(() => {})
}
})
},
1000,
{ leading: true, trailing: false }
),
showListChagne () {
this.dataForm.showList = this.dataForm.showListAll.filter(item => this.checkList.indexOf(item.name) > -1)
console.log('属性变更===================>', this.checkList, this.dataForm.showList, this.dataForm.showListAll)
}
},
mounted () {
this.getUserInfo()
},
beforeDestroy () {
console.log('销毁~~~~~~~~~~~~~~~~~~~~')
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
height: 580px;
overflow: auto;
}
.icon-input ::v-deep .el-input__inner {
cursor: pointer;
}
.detial-form ::v-deep {
.el-form-item {
margin-bottom: 0px;
line-height: 32px;
}
.el-form-item__label {
line-height: 32px;
}
.el-form-item__content {
line-height: 32px;
}
}
::v-deep .el-checkbox-button__inner {
width: 130px;
margin: 0 10px 5px;
border-left: unset !important;
border-radius: unset !important;
border: 1px solid #dcdfe6 !important;
}
</style>
<style lang="scss">
.mod-sys__menu {
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
&-icon-popover {
width: 458px;
overflow: hidden;
}
&-icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
&-icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
> .el-button {
padding: 8px;
margin: 8px 0 0 8px;
> span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
}
}
}
.previewImg {
position: fixed;
z-index: 9999;
}
</style>

View File

@ -0,0 +1,515 @@
<template>
<div>
<el-dialog
:visible.sync="visible"
:title="disabled ? '能力展示' : '挂接'"
@close="guanbi"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<!-- 挂载和修改-->
<div key="1" v-if="!disabled">
<!-- 挂接 -->
<el-form v-if="!UpdateState" ref="dataForm" :model="dataForm">
<el-form-item
v-for="(item, index) in dataList"
:key="index"
:label="item.attrType"
>
<el-input
v-model="dataForm.name"
v-if="item.type == 'name'"
></el-input>
<el-input
v-model="dataForm.apiUrl"
v-if="item.type == 'link'"
></el-input>
<el-input
type="textarea"
v-model="item.attrValue"
v-if="item.type == 'textarea'"
></el-input>
<el-select
v-if="item.type == 'select'"
v-model="item.attrValue"
placeholder="请选择活动区域"
>
<el-option
:label="itemSelect"
v-for="(itemSelect, indexSelect) in item.children"
:key="indexSelect"
:value="itemSelect"
></el-option>
</el-select>
<upload
:child="dataForm"
limit="1"
accept=".jpg,.png"
v-if="item.type == 'photo'"
></upload>
</el-form-item>
</el-form>
<!-- 修改 -->
<el-form
v-else
:model="dataFormUpdate"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
>
<el-form-item label="场景名称">
<el-input
v-model="dataFormUpdate.name"
placeholder="场景名称"
></el-input>
</el-form-item>
<el-form-item label="场景url">
<el-input
v-model="dataFormUpdate.apiUrl"
placeholder="场景url"
></el-input>
</el-form-item>
<el-form-item
v-for="item in dataFormUpdate.infoList"
:key="item.index"
:label="item.attrType"
>
<el-input
v-model="item.attrValue"
:placeholder="item.attrType"
v-if="item.attrType != '应用领域'"
></el-input>
<el-select
v-else
v-model="item.attrValue"
:placeholder="item.attrType"
>
<el-option
:value="item2"
v-for="(item2, index2) in dataList[2].children"
:key="index2"
:label="item2"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<!-- 展示 -->
<el-form key="2" class="detial-form" v-else>
<el-form-item label="场景名称" prop="name">
{{ dataFormShowDetails.name || "--" }}
</el-form-item>
<el-form-item label="场景url" prop="name">
{{ dataFormShowDetails.apiUrl || "--" }}
</el-form-item>
<el-form-item
v-for="item in dataFormShowDetails.infoList"
:key="item.index"
:label="item.attrType"
:prop="item.attrValue"
>
{{ item.attrValue || "--" }}
</el-form-item>
</el-form>
<template slot="footer" v-if="true">
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
<div>
<el-dialog :visible.sync="dialogVisibleImg">
<img width="100%" :src="previewImg" />
</el-dialog>
</div>
</div>
</template>
<script>
import debounce from "lodash/debounce";
import dictionaries from "@/utils/dictionaries";
import { mapState } from "vuex";
import { getIconList } from "@/utils";
import Cookies from "js-cookie";
import upload from "./upload.vue";
import qs from "qs";
export default {
components: {
upload,
},
data() {
return {
checkList: [],
dialogVisibleImg: false,
previewImg: "", //
dialogVisible: false,
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
uploadUrl:
window.SITE_CONFIG.apiURL +
"/sys/oss/upload?token=" +
Cookies.get("ucsToken"),
companyArr: dictionaries.companyArr,
visible: false,
sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr,
shareTypeArr: dictionaries.shareTypeArr,
iconList: [],
iconListVisible: false,
UpdateState: false,
dataForm: {
id: "",
deptId: "",
deptContacts: "",
deptPhone: "",
dataVolume: "",
shareCondition: "",
shareType: "",
shareMode: "",
delFlag: 0,
description: "",
downloads: 0,
image: "",
infoList: [],
link: "",
name: "",
note1: "",
note2: "",
note3: "",
note4: "",
note5: "",
score: "",
type: "赋能案例",
apiMethodType: "",
apiUrl: "",
visits: 0,
},
deptId: "",
fangwendizhi: "",
mingzi: "",
dataFormUpdate: {},
dataFormShowDetails: {},
infoList2: [],
infoList3: [],
dataList: [
{ attrType: "场景名称", attrValue: "", type: "name" },
{
attrType: "图片",
attrValue: "",
type: "photo",
child: { node1: "" },
},
{
attrType: "应用领域",
attrValue: "",
type: "select",
children: [],
},
{ attrType: "场景url", attrValue: "", type: "link" },
{ attrType: "案例背景", attrValue: "", type: "textarea" },
{ attrType: "业务挑战", attrValue: "", type: "textarea" },
{ attrType: "解决方案", attrValue: "", type: "textarea" },
{ attrType: "案例成效", attrValue: "", type: "textarea" },
],
};
},
props: {
disabled: {
type: Boolean,
default: false,
},
},
methods: {
//
getUserInfo() {
this.$http.get("/sys/user/info").then(({ data: res }) => {
this.dataForm.deptId = res.data.deptId;
this.deptId = res.data.deptId;
console.log("depid", this.dataForm);
});
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//
uploadBeforeUploadHandle(file) {
if (
file.type !== "image/jpg" &&
file.type !== "image/jpeg" &&
file.type !== "image/png" &&
file.type !== "image/gif"
) {
this.$message.error("只支持jpg、png、gif格式的图片");
return false;
}
},
imgUploadSuccess(res, file, fileList) {
console.log("zzzzzzz", res, file, fileList);
if (res.code !== 0) {
return this.$message.error(res.msg);
}
},
init() {
this.visible = true;
this.$nextTick(() => {
this.$refs.dataForm && this.$refs.dataForm.resetFields();
this.iconList = getIconList();
if (this.dataForm.id) {
this.getInfo();
}
});
},
// ,
iconListCurrentChangeHandle(icon) {
this.dataForm.imgurl = icon;
this.iconListVisible = false;
},
//
getInfo() {
const params = {
page: 1,
limit: 99,
dictTypeId: "1513712507692818433",
};
debugger;
this.$http
.get("/sys/dict/data/page" + "?" + qs.stringify(params))
.then(({ data: res }) => {
res.data.list.map((item) => {
this.dataList[2].children.push(item.dictLabel);
});
});
},
//
dataFormSubmitHandle: debounce(
function () {
this.$refs.dataForm.validate((valid) => {
this.getUserInfo();
this.dataForm.deptId = this.deptId;
console.log("表单数据=======================》", this.dataForm);
if (!this.UpdateState) {
this.dataList.map((item) => {
if (item.attrType != "场景名称" && item.attrType != "场景url") {
if (item.attrType == "图片" && this.dataForm.note1) {
const params = {
attrType: item.attrType,
attrValue: this.dataForm.note1,
delFlag: 0,
};
this.dataForm.infoList.push(params);
} else if (item.attrType != "图片" && item.attrValue) {
const params = {
attrType: item.attrType,
attrValue: item.attrValue,
delFlag: 0,
};
this.dataForm.infoList.push(params);
}
}
});
this.$http
.post("/resource/insert?source= b", this.dataForm)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
} else {
this.$http
.put("/resource/update", this.dataFormUpdate)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
}
});
},
1000,
{ leading: true, trailing: false }
),
},
watch: {
visible: {
immediate: true,
deep: true,
handler() {
this.dataForm = {
id: "",
deptId: "",
deptContacts: "",
deptPhone: "",
dataVolume: "",
shareCondition: "",
shareType: "",
shareMode: "",
delFlag: 0,
description: "",
downloads: 0,
image: "",
infoList: [],
link: "",
name: "",
note1: "",
note2: "",
note3: "",
note4: "",
note5: "",
score: "",
type: "赋能案例",
apiMethodType: "",
apiUrl: "",
visits: 0,
};
this.dataList = [
{ attrType: "场景名称", attrValue: "", type: "name" },
{
attrType: "图片",
attrValue: "",
type: "photo",
child: { node1: "" },
},
{
attrType: "应用领域",
attrValue: "",
type: "select",
children: [],
},
{ attrType: "场景url", attrValue: "", type: "link" },
{ attrType: "案例背景", attrValue: "", type: "textarea" },
{ attrType: "业务挑战", attrValue: "", type: "textarea" },
{ attrType: "解决方案", attrValue: "", type: "textarea" },
{ attrType: "案例成效", attrValue: "", type: "textarea" },
];
this.getInfo();
this.getUserInfo();
},
},
},
mounted() {
this.getInfo();
this.getUserInfo();
},
beforeDestroy() {
console.log("销毁~~~~~~~~~~~~~~~~~~~~");
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
width: 90%;
}
::v-deep .el-dialog__body {
height: 580px;
overflow: auto;
}
.icon-input ::v-deep .el-input__inner {
cursor: pointer;
}
::v-deep .upload-demo {
width: 800px;
}
::v-deep .el-form-item {
margin-bottom: 30px;
width: 100%;
line-height: 32px;
display: flex;
}
::v-deep .el-form-item__label {
line-height: 32px;
width: 120px;
margin-right: 20px;
text-align: center;
}
::v-deep textarea {
width: 800px;
}
::v-deep .el-form-item__content {
line-height: 32px;
}
::v-deep .el-input {
width: 800px;
}
::v-deep .el-checkbox-button__inner {
width: 130px;
margin: 0 10px 5px;
border-left: unset !important;
border-radius: unset !important;
border: 1px solid #dcdfe6 !important;
}
</style>
<style lang="scss">
.canassigncase-add-or-update {
position: relative;
}
.mod-sys__menu {
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
&-icon-popover {
width: 458px;
overflow: hidden;
}
&-icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
&-icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
> .el-button {
padding: 8px;
margin: 8px 0 0 8px;
> span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
}
}
}
.submit-father {
position: absolute;
}
.previewImg {
position: fixed;
z-index: 9999;
}
</style>

View File

@ -55,11 +55,16 @@
></el-table-column>
<el-table-column
prop="name"
label="应用名称"
label="场景名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="apiUrl"
label="场景url"
header-align="center"
align="center"
></el-table-column>
<el-table-column
v-for="(item, index) in dataList[0].infoList"
:key="index"
@ -127,7 +132,7 @@
<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./bsabilityservice-add-or-update";
import AddOrUpdate from "./canassigncase-add-or-update";
import dictionaries from "@/utils/dictionaries";
import qs from "qs";
import { type } from "os";
@ -151,7 +156,7 @@ export default {
creator: "",
selectType: 0,
delFlag: 0,
type: "应用资源",
type: "赋能案例",
},
qp: false,
};
@ -162,7 +167,7 @@ export default {
},
created() {
this.dataForm.name = "";
this.dataForm.type = "应用资源";
this.dataForm.type = "赋能案例";
},
mounted() {
window.addEventListener("resize", this.a);
@ -183,7 +188,7 @@ export default {
limit: 10,
delFlag: 0,
creator: "",
type: "应用资源",
type: "赋能案例",
name: "",
})
)
@ -246,7 +251,7 @@ export default {
// type: '',
pageNum: 1,
pageSize: this.limit,
type: "应用资源",
type: "赋能案例",
creator: "",
selectType: 0,
delFlag: 0,

View File

@ -3,12 +3,12 @@
<el-upload
ref="addUpload"
class="upload-demo"
:accept='accept'
:accept="accept"
:action="fileUploadUrl"
:on-success="onSuccess"
:on-remove="onRemove"
:on-exceed='onExceed'
:limit='limit'
:on-exceed="onExceed"
:limit="limit"
:on-preview="onPreview"
list-type="text"
>
@ -21,42 +21,40 @@
</template>
<script>
export default {
name: '',
components: {
},
name: "",
components: {},
props: {
child: {
type: Object,
default: () => {
return {}
}
return {};
},
},
limit: {
type: Number,
default: 1
default: 1,
},
accept: {
type: String,
default: '.jpg,.png'
}
default: ".jpg,.png",
},
},
data() {
return {
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload'
}
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload",
};
},
methods: {
onSuccess(res, file) {
console.log('limit', this.limit)
console.log(res, file, this.child)
console.log("limit", this.limit);
console.log(res, file, this.child);
if (res.code !== 0) {
return this.$message.error('上传图片失败')
return this.$message.error("上传图片失败");
}
if (this.child.note1 == '') {
this.child.note1 = res.data
if (this.child.note1 == "") {
this.child.note1 = res.data;
} else {
this.child.note1 += (';' + res.data)
this.child.note1 += ";" + res.data;
}
// this.dataForm.infoList.map((item, index) => {
// if (item.attrType == '') {
@ -72,33 +70,32 @@ export default {
onRemove(file, fileList) {
// this.$refs.addUpload.clearFiles()
// ;
const arr = this.child.note1.split(';')
const arr = this.child.note1.split(";");
fileList.forEach((item, index) => {
if (item === file.response.data) {
fileList.splice(index, 1)
fileList.splice(index, 1);
}
})
});
arr.forEach((item, index) => {
if (item === file.response.data) {
arr.splice(index, 1)
arr.splice(index, 1);
}
})
});
if (arr.length == 0) {
this.child.note1 = ''
this.child.note1 = "";
} else {
this.child.note1 = arr.join(';')
this.child.note1 = arr.join(";");
}
console.log(this.child.note1)
console.log(this.child.note1);
},
onPreview(file) {
console.log('点击预览===============>', file)
window.open(file.response.data)
console.log("点击预览===============>", file);
window.open(file.response.data);
},
onExceed(files, fileList) {
this.$message.warning('当前附件数量已达上限,请先删除部分附件!')
}
}
}
this.$message.warning("当前附件数量已达上限,请先删除部分附件!");
},
},
};
</script>
<style lang='scss' scoped>
</style>
<style lang="scss" scoped></style>