add: 赋能场景
This commit is contained in:
parent
337ee0a931
commit
a8b91e2788
|
|
@ -0,0 +1,427 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalType === 'display' ? '能力展示' : '挂接'"
|
||||||
|
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||||
|
<div v-if="modalType !== 'display'" style="
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
">
|
||||||
|
填写字段
|
||||||
|
</div>
|
||||||
|
<el-checkbox-group v-if="modalType !== 'display'" v-model="checkList" @change="changeBtn"
|
||||||
|
style="margin-bottom: 20px">
|
||||||
|
<el-checkbox-button v-for="(item, i) in btnList" :label="item.name" :key="i">{{ item.name }}
|
||||||
|
</el-checkbox-button>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<!-- 挂载和修改-->
|
||||||
|
<div key="1" v-if="modalType !== 'display'">
|
||||||
|
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
|
||||||
|
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div style="margin-bottom:20px" v-if="checkList.includes('基本信息')">
|
||||||
|
<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="applicationArea">
|
||||||
|
<el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
|
||||||
|
<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门联系人" prop="deptUser">
|
||||||
|
<el-input v-model="dataForm.deptUser" placeholder="请输入部门联系人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门联系人电话" prop="mobile">
|
||||||
|
<el-input v-model="dataForm.mobile" placeholder="请输入部门联系人电话"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务商" prop="provider">
|
||||||
|
<el-input v-model="dataForm.provider" placeholder="请输入服务商"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务商联系人" prop="providerUser">
|
||||||
|
<el-input v-model="dataForm.providerUser" placeholder="请输入服务商联系人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务商联系人电话" prop="providerMobile">
|
||||||
|
<el-input v-model="dataForm.providerMobile" placeholder="请输入服务商联系人电话"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关联能力 -->
|
||||||
|
<div class="" v-if="checkList.includes('关联能力')">
|
||||||
|
<integrated-combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm">
|
||||||
|
</integrated-combine-ability>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 使用步骤 -->
|
||||||
|
<div v-if="checkList.includes('使用步骤')">
|
||||||
|
<common-question :dataForm="dataForm" @update="updateDataForm"></common-question>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展示 -->
|
||||||
|
<el-form key="2" class="detial-form" v-else :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'">
|
||||||
|
<el-form-item :label="displayInfo[data]" v-for="(data, i) in Object.keys(displayInfo)" :key="i" :prop="data">
|
||||||
|
{{ dataForm[data] || "--" }}
|
||||||
|
</el-form-item>
|
||||||
|
<div v-for="(data, i) in displayListInfo['使用步骤']" :key="`${i}${JSON.stringify(data)}`">
|
||||||
|
<el-form-item :label="`使用步骤${i + 1}`">
|
||||||
|
{{ `${data['question']}` }}
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="`问题描述${i + 1}`">
|
||||||
|
{{ `${data['answer']} ` }}
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-for="(data, i) in displayListInfo['关联能力']" :key="`${i}${JSON.stringify(data)}`">
|
||||||
|
<el-form-item :label="`能力类别${i + 1}`">
|
||||||
|
{{ `${data['type']}` }}
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="`能力名称${i + 1}`">
|
||||||
|
{{ `${data['name']} ` }}
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template slot="footer">
|
||||||
|
<el-button @click="closeModal">{{ $t("cancel") }}</el-button>
|
||||||
|
<el-button v-if="modalType !== 'display'" type="primary" @click="dataFormSubmitHandle()">{{
|
||||||
|
$t("confirm")
|
||||||
|
}}</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import debounce from "lodash/debounce";
|
||||||
|
import qs from "qs";
|
||||||
|
import CommonQuestion from '../components/common-question.vue';
|
||||||
|
import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
|
||||||
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CommonQuestion,
|
||||||
|
IntegratedCombineAbility,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fileList: [],
|
||||||
|
fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
|
||||||
|
dataForm: {
|
||||||
|
"applicationArea": "",
|
||||||
|
"description": "",
|
||||||
|
"fuseAttrList": [
|
||||||
|
// {
|
||||||
|
// "attrType": "技术文档",
|
||||||
|
// "attrValue": "",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
"attrType": "使用步骤",
|
||||||
|
"attrValue": [{ question: "", answer: "" }],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"fuseResourceList": [
|
||||||
|
{
|
||||||
|
"resourceId": 0,
|
||||||
|
"sequence": ""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mobile": "",
|
||||||
|
"name": "",
|
||||||
|
"provider": "",
|
||||||
|
"providerMobile": "",
|
||||||
|
"providerUser": "",
|
||||||
|
"deptUser": "",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入名称",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
description: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入描述",
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
btnList: [
|
||||||
|
{
|
||||||
|
name: '基本信息',
|
||||||
|
key: 'basic',
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '关联能力',
|
||||||
|
key: 'combine',
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '使用步骤',
|
||||||
|
key: 'basic',
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
checkList: ['基本信息', '关联能力', '使用步骤'],
|
||||||
|
areaList: [],
|
||||||
|
fileNameList: [],
|
||||||
|
addOrUpdateVisibleCopy: this.addOrUpdateVisible,
|
||||||
|
displayInfo: {
|
||||||
|
'name': '名称',
|
||||||
|
'description': '描述',
|
||||||
|
},
|
||||||
|
displayListInfo: {
|
||||||
|
'使用步骤': [],
|
||||||
|
'关联能力': []
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modalType: {
|
||||||
|
type: String,
|
||||||
|
default: 'add'
|
||||||
|
},
|
||||||
|
addOrUpdateVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dataForm: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataForm = newVal
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
addOrUpdateVisible: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.addOrUpdateVisibleCopy = newVal;
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clearForm() {
|
||||||
|
this.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
this.$emit('closeModal')
|
||||||
|
},
|
||||||
|
// 更新表单
|
||||||
|
updateDataForm(data) {
|
||||||
|
if (data.title == '使用步骤') {
|
||||||
|
this.dataForm.fuseAttrList.map(v => {
|
||||||
|
if (v.attrType === '使用步骤') {
|
||||||
|
v.attrValue = JSON.stringify(data.list)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (data.title == '关联能力') {
|
||||||
|
this.dataForm.fuseResourceList = data.list
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 改变按钮状态
|
||||||
|
changeBtn(data) {
|
||||||
|
this.checkList = data;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 表单提交
|
||||||
|
dataFormSubmitHandle: debounce(
|
||||||
|
function () {
|
||||||
|
this.$refs.dataForm.validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
this.$message.error("请检查表单是否填写完整");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
let methodsObj = {
|
||||||
|
'add': 'post',
|
||||||
|
'update': 'put'
|
||||||
|
}
|
||||||
|
let arr = this.dataForm.fuseResourceList.filter(v => v.resourceId !== '') || []
|
||||||
|
if (arr.length == 0) {
|
||||||
|
this.dataForm.fuseResourceList = []
|
||||||
|
}
|
||||||
|
let _obj = Object.assign({}, this.dataForm, {
|
||||||
|
type: '赋能场景'
|
||||||
|
})
|
||||||
|
this.$http
|
||||||
|
[methodsObj[this.modalType]]("/fuse", _obj)
|
||||||
|
.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.$refs.dataForm && this.$refs.dataForm.resetFields();
|
||||||
|
this.$emit("refreshDataList");
|
||||||
|
this.$emit("closeModal");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.$message.error(err)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
1000,
|
||||||
|
{ leading: true, trailing: false }
|
||||||
|
),
|
||||||
|
// 详情
|
||||||
|
getDetail(data) {
|
||||||
|
this.dataForm = data;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log('this.dataForm----详情-------->', this.dataForm);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 重组数据
|
||||||
|
getDisPlayData() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log('this.dataForm----重组数据-------->', this.dataForm);
|
||||||
|
const questionObj = this.dataForm.fuseAttrList.find(v => v.attrType == '使用步骤') || {};
|
||||||
|
let fuseResourceList = this.dataForm.fuseResourceList || [];
|
||||||
|
let arr = []
|
||||||
|
fuseResourceList.map(v => {
|
||||||
|
arr.push({
|
||||||
|
name: v.resource.name,
|
||||||
|
type: v.resource.type,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.displayListInfo['使用步骤'] = JSON.parse(questionObj.attrValue || '[]')
|
||||||
|
this.displayListInfo['关联能力'] = arr
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clearForm()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 0 12px 0 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 32px;
|
||||||
|
background: pink;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-left: 132px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<template>
|
||||||
|
<el-card shadow="never" class="aui-card--fill">
|
||||||
|
<div class="mod-ability__bsabilityai">
|
||||||
|
<el-form :inline="true" :model="dataForm">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="dataForm.name" placeholder="名称" clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="searchData">{{
|
||||||
|
$t("query")
|
||||||
|
}}</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button v-if="$hasPermission('ability:bsabilityai:save')" type="primary" @click="addServe()">挂接</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="reset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
|
||||||
|
style="width: 100%" :height="qp ? '810px' : '650px'">
|
||||||
|
|
||||||
|
<el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="description" label="描述" header-align="center" align="center"></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="94" right="0">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
|
||||||
|
@click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>
|
||||||
|
<el-button v-if="$hasPermission('ability:bsabilityai:delete')" type="text" size="small"
|
||||||
|
@click="deleteRow(scope.row.id)">{{ $t("delete") }}</el-button>
|
||||||
|
<el-button type="text" size="small" @click="showDetail(scope.row)">能力展示</el-button>
|
||||||
|
<el-button type="text" size="small" @click="showDocument(scope.row)">技术文档</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="Number(total)"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
|
||||||
|
@current-change="pageCurrentChangeHandle">
|
||||||
|
</el-pagination>
|
||||||
|
|
||||||
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
|
<add-update-scene v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="query" @closeModal="closeModal"
|
||||||
|
:addOrUpdateVisible="addOrUpdateVisible" :modalType="modalType">
|
||||||
|
</add-update-scene>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixinViewModule from "@/mixins/view-module";
|
||||||
|
import AddUpdateScene from "./add-update-scene";
|
||||||
|
// import dictionaries from "@/utils/dictionaries";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [mixinViewModule],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [],
|
||||||
|
childName: '',
|
||||||
|
mixinViewModuleOptions: {
|
||||||
|
getDataListURL: "/fuse/page",
|
||||||
|
exportURL: "/ability/bsabilityai/export",
|
||||||
|
deleteURL: "/fuse",
|
||||||
|
getDataListIsPage: true,
|
||||||
|
deleteIsBatch: false,
|
||||||
|
},
|
||||||
|
disabled: false,
|
||||||
|
// sceneArr: dictionaries.sceneArr,
|
||||||
|
// fieldArr: dictionaries.fieldArr,
|
||||||
|
// shareFormArr: dictionaries.shareFormArr,
|
||||||
|
dataForm: {
|
||||||
|
name: "",
|
||||||
|
order: 'desc',
|
||||||
|
orderField: 'create_date',
|
||||||
|
type: '赋能场景'
|
||||||
|
},
|
||||||
|
qp: false,
|
||||||
|
// relateApplicationResourceVisible: false,
|
||||||
|
// relationData: {}, //打开穿梭框时传递的参数
|
||||||
|
// topNameArray: [], //
|
||||||
|
modalType: 'add',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
components: {
|
||||||
|
AddUpdateScene,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("resize", this.a);
|
||||||
|
this.fullScreen();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
deleteRow(id) {
|
||||||
|
this.$http.delete('/fuse/delete', {
|
||||||
|
data: [id]
|
||||||
|
}).then(res => {
|
||||||
|
console.log('删除成功', res)
|
||||||
|
if (res.data.code !== 0) {
|
||||||
|
return this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
this.$message({
|
||||||
|
message: '删除成功',
|
||||||
|
type: "success",
|
||||||
|
duration: 500,
|
||||||
|
onClose: () => {
|
||||||
|
this.query()
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}).catch(err => {
|
||||||
|
this.$message.error(err);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 查询
|
||||||
|
searchData() {
|
||||||
|
this.query()
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
reset() {
|
||||||
|
this.dataForm.name = "";
|
||||||
|
this.query()
|
||||||
|
},
|
||||||
|
// 修改
|
||||||
|
handleUpdate(val) {
|
||||||
|
this.addOrUpdateVisible = true;
|
||||||
|
this.modalType = 'update';
|
||||||
|
const cloneVal = JSON.parse(JSON.stringify(val))
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// this.$refs.addOrUpdate.dataForm = cloneVal;
|
||||||
|
this.$refs.addOrUpdate.getDetail(cloneVal)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 挂接
|
||||||
|
addServe() {
|
||||||
|
this.addOrUpdateVisible = true
|
||||||
|
this.modalType = 'add';
|
||||||
|
},
|
||||||
|
closeModal() {
|
||||||
|
this.addOrUpdateVisible = false;
|
||||||
|
},
|
||||||
|
// 展示
|
||||||
|
showDetail(val) {
|
||||||
|
this.addOrUpdateVisible = true;
|
||||||
|
this.modalType = 'display';
|
||||||
|
const cloneVal = JSON.parse(JSON.stringify(val))
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.addOrUpdate.dataForm = cloneVal;
|
||||||
|
this.$refs.addOrUpdate.getDisPlayData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showDocument(val) {
|
||||||
|
console.log(val);
|
||||||
|
window.open(
|
||||||
|
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
|
||||||
|
"_blank"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
fullScreen() {
|
||||||
|
if (window.outerHeight === screen.availHeight) {
|
||||||
|
if (window.outerWidth === screen.availWidth) {
|
||||||
|
console.log(
|
||||||
|
"全屏1",
|
||||||
|
window.outerHeight,
|
||||||
|
screen.availHeight,
|
||||||
|
window.outerWidth,
|
||||||
|
screen.availWidth
|
||||||
|
);
|
||||||
|
this.qp = false;
|
||||||
|
} else {
|
||||||
|
console.log(
|
||||||
|
"不是全屏2",
|
||||||
|
window.outerHeight,
|
||||||
|
screen.availHeight,
|
||||||
|
window.outerWidth,
|
||||||
|
screen.availWidth
|
||||||
|
);
|
||||||
|
this.qp = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(
|
||||||
|
"不是全屏3",
|
||||||
|
window.outerHeight,
|
||||||
|
screen.availHeight,
|
||||||
|
window.outerWidth,
|
||||||
|
screen.availWidth
|
||||||
|
);
|
||||||
|
this.qp = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.el-tooltip__popper {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<template>
|
||||||
|
<div class="question-box">
|
||||||
|
<div class="title">
|
||||||
|
常见问题
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) in dataInfo" :key="index">
|
||||||
|
<el-form-item label="问题名称" prop="question">
|
||||||
|
<el-input v-model="item.question" placeholder="请输入问题名称" style="width:90%"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="问题描述" prop="question">
|
||||||
|
<el-input v-model="item.answer" placeholder="请输入问题描述" style="width:90%"></el-input>
|
||||||
|
<el-button style="margin-left:10px" @click="deleteItem(index)" type="danger" size="small">删除
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-button style="margin-left:120px" size="small" v-if="index == dataInfo.length - 1" @click="addItem"
|
||||||
|
type="primary">添加
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
dataForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataInfo: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dataInfo: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.dataInfo = newVal;
|
||||||
|
this.$emit('update', {
|
||||||
|
title: '常见问题',
|
||||||
|
list: newVal
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
dataForm: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
// 防止无限循环，简单比较一下
|
||||||
|
if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
|
||||||
|
this.dataForm = newVal;
|
||||||
|
this.getDataInfo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDataInfo() {
|
||||||
|
let arr = []
|
||||||
|
let fuseAttrList = this.dataForm.fuseAttrList || [];
|
||||||
|
let obj = fuseAttrList.find(v => v.attrType === '常见问题') || {}
|
||||||
|
console.log('obj-------常见问题----->', obj);
|
||||||
|
let attrValue = JSON.parse(obj.attrValue)
|
||||||
|
|
||||||
|
if (attrValue.length > 0) {
|
||||||
|
attrValue.map(v => {
|
||||||
|
arr.push({
|
||||||
|
question: v.question,
|
||||||
|
answer: v.answer,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
arr = []
|
||||||
|
arr.push({
|
||||||
|
question: "",
|
||||||
|
answer: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.dataInfo = arr;
|
||||||
|
},
|
||||||
|
// 新增
|
||||||
|
addItem() {
|
||||||
|
this.dataInfo.push({
|
||||||
|
question: "",
|
||||||
|
answer: "",
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteItem(list, index) {
|
||||||
|
this.dataInfo.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.question-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue