<template>
|
<div class="">
|
<!-- 表单 -->
|
<!-- 产品信息 -->
|
<a-form-model ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol">
|
<!-- 产品名称 编号 版本 -->
|
<a-form-model-item label="产品名称：" prop="title">
|
<a-select v-model="id" show-search :filter-option="filterOption" :disabled="!!prodData" @change="prodChange">
|
<a-select-option v-for="(prod, idx) in prodList" :key="'prod_' + idx" :value="prod.id">{{ prod.label
|
}}</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<a-form-model-item label="版本时间：" prop="versionTime">
|
<a-input v-model="versionTime" disabled></a-input>
|
</a-form-model-item>
|
<!-- 指定人 -->
|
<a-form-model-item label="反馈给：" prop="title">
|
<a-select mode="multiple" placeholder="请选择反馈接收人" show-search v-model="toUsers" @change="handleChange">
|
<a-select-option v-for="(user, idx) in userList" :key="'user_' + idx" :disabled="user.id == 25"
|
:value="user.id + '&&' + user.name">
|
{{ user.name }}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
<!-- 附件 -->
|
<a-row type="flex" class="row">
|
<a-col flex="13.4em" class="label">附件</a-col>
|
<a-col :flex="1">
|
<a-upload class="upload" multiple :before-upload="beforeUpload" @change="uploadChange">
|
<a-button type="primary">选择文件</a-button>
|
</a-upload>
|
</a-col>
|
</a-row>
|
<!-- 问题描述 -->
|
<a-form-model-item label="问题描述：" prop="mailList">
|
<yc-textarea placeholder="请输入问题详情" v-model="textDes" show-word-limit :maxLength="300" :rows="6" />
|
</a-form-model-item>
|
</a-form-model>
|
<div class="footer">
|
<a-button class="btn" @click="cancel">取消</a-button>
|
<a-button class="btn" type="primary" @click="ok">提交</a-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import YcTextarea from "@/components/input/ycTextarea";
|
import { getFkProduct } from "../product/apis";
|
import { getUserByRoleIds } from "@/pages/user/apis";
|
import { mapGetters } from "vuex";
|
|
export default {
|
name: "",
|
props: {
|
prodData: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
files: null,
|
versionTime: "",
|
subVersion: "",
|
id: "",
|
prodList: [],
|
userList: [],
|
toUsers: ['25&&杨红兰'],
|
textDes: "",
|
receiverIds: "25",
|
receiverNames: "杨红兰",
|
labelCol: { span: 6 },
|
wrapperCol: { span: 18 },
|
};
|
},
|
components: {
|
YcTextarea,
|
},
|
computed: {
|
...mapGetters("account", ["user"]),
|
},
|
methods: {
|
filterOption(input, option) {
|
return option.componentOptions.children[0].text.indexOf(input) != -1;
|
},
|
handleChange(value) {
|
// console.log(`Selected: ${value}`, value);
|
this.toUsers = value;
|
this.receiverIds = value.map((v) => v.split("&&")[0]).join(",");
|
this.receiverNames = value.map((v) => v.split("&&")[1]).join(",");
|
// console.log(this.receiverIds, this.receiverNames);
|
},
|
beforeUpload() {
|
return false;
|
},
|
uploadChange(data) {
|
const { file, fileList } = data;
|
// if (fileList.length > 1) {
|
// fileList.shift();
|
// }
|
if (fileList.length) {
|
// this.files = fileList[0].originFileObj;
|
this.files = fileList.map((v) => v.originFileObj);
|
} else {
|
this.files = null;
|
}
|
},
|
prodChange(id) {
|
// console.log(id);
|
let prod = this.prodList.filter((v) => v.id == id)[0];
|
this.subVersion = prod.version;
|
this.versionTime = prod.versionTime;
|
this.parentCode = prod.parentCode;
|
},
|
// 获取多个角色组的所有用户
|
getUserByRoleIds() {
|
getUserByRoleIds("1001,1002,1003")
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let list = [];
|
if (code && data) {
|
// console.log(data2);
|
if ('杨红兰' == this.user.name) {
|
list = data2;
|
} else {
|
list = data2.filter((v) => v.name != this.user.name);
|
}
|
}
|
// console.log(list, "====list");
|
this.userList = list;
|
})
|
.catch((err) => {
|
console.error(err);
|
});
|
},
|
// 获取产品列表
|
getProdList() {
|
getFkProduct()
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
let prodList = [];
|
if (code && data) {
|
prodList = data2.map((v) => {
|
let label = v.customCode
|
? `${v.parentCode} ${v.parentName} (${v.customCode})`
|
: `${v.parentCode} ${v.parentName}`;
|
label += " "+v.parentModel;
|
return {
|
...v,
|
label,
|
};
|
});
|
}
|
this.prodList = prodList;
|
})
|
.catch((err) => {
|
console.error(err);
|
});
|
},
|
ok() {
|
let {
|
textDes,
|
id: productId,
|
subVersion,
|
files,
|
receiverIds,
|
receiverNames,
|
user,
|
} = this;
|
if (!productId) {
|
this.$message.error("请选择要反馈的产品");
|
return false;
|
}
|
if ("" == receiverIds) {
|
this.$message.error("请选择反馈接收人");
|
return false;
|
}
|
let data = {
|
content: textDes,
|
multipartFile: files || [],
|
productId,
|
receiverIds,
|
receiverNames,
|
senderId: user.id,
|
subVersion,
|
};
|
this.$emit("ok", data);
|
},
|
cancel() {
|
this.$emit("cancel");
|
},
|
init() {
|
if (this.prodData) {
|
let { id, versionTime, version, parentCode } = this.prodData;
|
this.id = id;
|
this.subVersion = version;
|
this.versionTime = versionTime;
|
this.parentCode = parentCode;
|
}
|
},
|
},
|
|
mounted() {
|
// console.log("prod", this.prodData);
|
this.getProdList();
|
this.getUserByRoleIds();
|
this.init();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.row {
|
margin-bottom: 24px;
|
}
|
|
.label {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
color: rgba(0, 0, 0, 0.85);
|
// padding-right: 0.4em;
|
height: 32px;
|
|
&::after {
|
content: ":";
|
margin-left: 2px;
|
margin-right: 8px;
|
}
|
}
|
|
.footer {
|
text-align: right;
|
|
.btn+.btn {
|
margin-left: 16px;
|
}
|
}
|
|
.upload {
|
display: flex;
|
/deep/.ant-upload-list {
|
flex: 1;
|
width: 0;
|
}
|
}</style>
|
