1074 lines
32 KiB
Vue
1074 lines
32 KiB
Vue
<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>
|