402 lines
11 KiB
Vue
402 lines
11 KiB
Vue
<template>
|
|
<!--FEEDBACK-->
|
|
<div v-if="visible" @click.stop="() => false">
|
|
<el-dialog
|
|
:visible.sync="visible"
|
|
v-dialogDrag
|
|
width="800px"
|
|
:close-on-click-modal="false"
|
|
@close="cancel"
|
|
>
|
|
<div slot="title">
|
|
{{ title }}
|
|
</div>
|
|
<!-- 项目详情 -->
|
|
<div class="trialsBox" v-if="visitTaskId">
|
|
<el-form
|
|
label-position="right"
|
|
:model="form"
|
|
:inline="true"
|
|
class="trialsForm"
|
|
v-if="type === 'detail'"
|
|
>
|
|
<el-form-item :label="$t('feedBack:trials:code')" style="width: 40%">
|
|
<span>{{ form.TrialCode }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('feedBack:trials:name')" style="width: 40%">
|
|
<span>{{ form.ExperimentName }}</span>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('feedBack:trials:siteCode')"
|
|
style="width: 40%"
|
|
>
|
|
<span>{{ form.TrialSiteCode }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('feedBack:trials:visit')" style="width: 40%">
|
|
<span>{{form.SubjectCode}} - {{ form.SubjectVisitName }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-form
|
|
ref="feedBackForm"
|
|
label-position="right"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<!-- 影像异常tip -->
|
|
<p class="tip" v-if="type === 'imgfail'">
|
|
<i
|
|
class="el-icon-warning-outline"
|
|
style="color: #f56c6c; font-size: 24px"
|
|
></i>
|
|
<span>{{ $t("feedBack:imgfail:tip") }}</span>
|
|
</p>
|
|
<!-- 问题反馈 -->
|
|
<el-form-item
|
|
:label="$t('feedBack:form:feedBack')"
|
|
prop="QuestionType"
|
|
v-if="type === 'feedback' && trialId"
|
|
>
|
|
<el-select v-model="form.QuestionType" style="width: 100%">
|
|
<el-option
|
|
v-for="item in QuestionTypeOptions"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 问题反馈 -->
|
|
<el-form-item
|
|
:label="$t('feedBack:form:feedBack')"
|
|
prop="QuestionType"
|
|
v-if="type === 'detail'"
|
|
>
|
|
<span>{{
|
|
QuestionTypeOptions.filter(
|
|
(item) => item.value === form.QuestionType
|
|
)[0].label
|
|
}}</span>
|
|
</el-form-item>
|
|
<!-- 问题描述 -->
|
|
<el-form-item
|
|
:label="$t('feedBack:form:description')"
|
|
prop="QuestionDescription"
|
|
>
|
|
<el-input
|
|
v-model="form.QuestionDescription"
|
|
type="textarea"
|
|
:rows="4"
|
|
:maxlength="500"
|
|
:disabled="type === 'detail'"
|
|
/>
|
|
</el-form-item>
|
|
<!-- 截图 -->
|
|
<el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
|
|
<uploadImage
|
|
:path.sync="form.ScreenshotList"
|
|
:isUpload.sync="loading"
|
|
:disabled="type === 'detail'"
|
|
ref="uploadImage"
|
|
/>
|
|
</el-form-item>
|
|
<!-- 反馈时间 -->
|
|
<el-form-item
|
|
:label="$t('feedBack:form:time')"
|
|
prop="screenshot"
|
|
v-if="type === 'detail'"
|
|
>
|
|
<span>{{ form.CreateTime }}</span>
|
|
</el-form-item>
|
|
<!-- 状态 -->
|
|
<el-form-item
|
|
:label="$t('feedBack:form:status')"
|
|
prop="screenshot"
|
|
v-if="type === 'detail' && level > 7"
|
|
>
|
|
<el-switch
|
|
v-model="form.State"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
:active-text="$fd('FeedBackStatus', 1)"
|
|
:inactive-text="$fd('FeedBackStatus', 0)"
|
|
:disabled="level < 8 || !isStateChange"
|
|
@change="changeState"
|
|
>
|
|
</el-switch>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" v-if="type !== 'detail' || isImgfail">
|
|
<!-- 取消 -->
|
|
<el-button size="small" @click.stop="cancel">
|
|
{{ $t("feedBack:button:cancel") }}
|
|
</el-button>
|
|
<!-- 保存 -->
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click.stop="save"
|
|
:loading="loading"
|
|
>
|
|
{{ $t("feedBack:button:save") }}
|
|
</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import uploadImage from "./uploadImage.vue";
|
|
import {
|
|
addOrUpdateUserFeedBack,
|
|
getUserFeedBackInfo,
|
|
batchUpdateFeedBackState,
|
|
} from "@/api/trials.js";
|
|
export default {
|
|
name: "FB",
|
|
components: { uploadImage },
|
|
data() {
|
|
return {
|
|
title: null,
|
|
visible: false,
|
|
loading: false,
|
|
options: [],
|
|
type: null, // detail 表格详情 feedback 填写反馈 imgfail 影像异常
|
|
trialId: null, // 项目id
|
|
Id: null, // 反馈数据id
|
|
visitTaskId: null, // 任务id
|
|
isImgfail: false, // 是否是影像异常
|
|
isStateChange: true, // 是否可以切换状态
|
|
form: {
|
|
Id: null,
|
|
SubjectId: null,
|
|
SubjectVisitId: null,
|
|
QuestionType: 0,
|
|
QuestionDescription: null,
|
|
State: 0,
|
|
TrialSiteId: null,
|
|
TrialId: null,
|
|
VisitTaskId: null,
|
|
ScreenshotList: [],
|
|
ScreenshotListStr: null,
|
|
},
|
|
rules: {
|
|
QuestionType: [
|
|
{
|
|
required: true,
|
|
message: this.$t("common:ruleMessage:specify"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
QuestionDescription: [
|
|
{
|
|
required: true,
|
|
message: this.$t("common:ruleMessage:specify"),
|
|
trigger: "blur",
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (value.length < 5) {
|
|
callback(
|
|
new Error(this.$t("feedBack:ruleMessage:lengthLimitMin5"))
|
|
);
|
|
}
|
|
callback();
|
|
},
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
isUpload: false,
|
|
};
|
|
},
|
|
computed: {
|
|
level() {
|
|
if (this.hasPermi(["role:dev", "role:admin"])) {
|
|
return 9;
|
|
}
|
|
if (this.hasPermi(["role:pm"])) {
|
|
return 8;
|
|
}
|
|
if (this.hasPermi(["role:ir", "role:crc"])) {
|
|
return 7;
|
|
}
|
|
return 0;
|
|
},
|
|
QuestionTypeOptions() {
|
|
if (this.level > 7) {
|
|
return [
|
|
...this.$d.FeedBackTypeToCRC.filter((item) => item.value > 0),
|
|
...this.$d.FeedBackTypeToIR,
|
|
];
|
|
}
|
|
if (this.hasPermi(["role:ir"])) {
|
|
return this.$d.FeedBackTypeToIR;
|
|
}
|
|
if (this.hasPermi(["role:crc"])) {
|
|
return this.$d.FeedBackTypeToCRC;
|
|
}
|
|
return [];
|
|
},
|
|
},
|
|
methods: {
|
|
open(data) {
|
|
let { type, trialId, Id, visitTaskId } = data;
|
|
this.type = type;
|
|
this.trialId = trialId;
|
|
this.Id = Id;
|
|
this.visitTaskId = visitTaskId;
|
|
console.log(visitTaskId, "visitTaskId");
|
|
if (visitTaskId) {
|
|
this.isImgfail = true;
|
|
}
|
|
console.log(this.isImgfail, "isImgfail");
|
|
this.setTypeOption();
|
|
if (!Id) {
|
|
this.title = this.setTitle();
|
|
}
|
|
if (Id || visitTaskId) {
|
|
this.getInfo(Id, visitTaskId);
|
|
}
|
|
this.visible = true;
|
|
},
|
|
cancel() {
|
|
this.visible = false;
|
|
this.$emit("closed");
|
|
},
|
|
async save() {
|
|
try {
|
|
let validate = await this.$refs.feedBackForm.validate();
|
|
if (!validate) return;
|
|
if (this.trialId) {
|
|
this.form.TrialId = this.trialId;
|
|
}
|
|
if (this.visitTaskId) {
|
|
this.form.VisitTaskId = this.visitTaskId;
|
|
}
|
|
if (this.Id) {
|
|
this.form.Id = this.Id;
|
|
}
|
|
this.loading = true;
|
|
let res = await addOrUpdateUserFeedBack(this.form);
|
|
this.loading = false;
|
|
if (res.IsSuccess) {
|
|
this.$emit("success");
|
|
this.$message.success(this.$t("feedBack:save:success"));
|
|
this.cancel();
|
|
}
|
|
} catch (err) {
|
|
this.loading = false;
|
|
console.log(err);
|
|
}
|
|
},
|
|
// 修改状态
|
|
async changeState() {
|
|
if (this.isImgfail) return;
|
|
try {
|
|
let data = {
|
|
IdList: [this.Id],
|
|
State: this.form.State,
|
|
};
|
|
let res = await batchUpdateFeedBackState(data);
|
|
if (res.IsSuccess) {
|
|
this.$message.success(this.$t("feedBack:changeState:success"));
|
|
this.$emit("success");
|
|
this.cancel();
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
// 获取反馈详情
|
|
async getInfo(Id, visitTaskId) {
|
|
try {
|
|
let data = {
|
|
Id,
|
|
visitTaskId,
|
|
};
|
|
let res = await getUserFeedBackInfo(data);
|
|
if (res.IsSuccess && res.Result) {
|
|
this.form = res.Result;
|
|
this.Id = res.Result.Id;
|
|
if (res.Result.State > 0) {
|
|
this.isStateChange = false;
|
|
}
|
|
if (res.Result.VisitTaskId) {
|
|
this.visitTaskId = res.Result.VisitTaskId;
|
|
}
|
|
let code = this.$fd("UserType", res.Result.UserTypeEnum);
|
|
this.title = this.setTitle(code, res.Result.FeedBackFullName);
|
|
if (visitTaskId) {
|
|
code = `${res.Result.SubjectCode}-${res.Result.SubjectVisitName}`;
|
|
this.title = this.setTitle(code, res.Result.FeedBackFullName);
|
|
}
|
|
this.$refs.uploadImage.initFileList(res.Result.ScreenshotList);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
setTypeOption() {
|
|
if (!this.trialId) return (this.options = []);
|
|
if (this.hasPermi(["role:ir"]))
|
|
return (this.option = this.$d.FeedBackTypeToIR);
|
|
if (this.hasPermi(["role:crc"]))
|
|
return (this.option = this.$d.FeedBackTypeToCRC);
|
|
},
|
|
setTitle(code, name) {
|
|
console.log(code, name);
|
|
if (this.hasPermi(["role:pm"]) && this.visitTaskId) {
|
|
return `${this.$t("feedBack:form:title:pm2")}(${code}/${name})`;
|
|
}
|
|
if (this.hasPermi(["role:pm", "role:dev", "role:admin"])) {
|
|
return `${this.$t("feedBack:form:title:pm")}(${code},${name})`;
|
|
}
|
|
if (this.hasPermi(["role:ir", "role:crc"]) && this.type === "detail") {
|
|
return `${this.$t("feedBack:form:detail:title")}`;
|
|
}
|
|
if (this.hasPermi(["role:ir", "role:crc"])) {
|
|
return `${this.$t("feedBack:form:title")}`;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tip {
|
|
width: 86%;
|
|
margin: auto;
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
// border-radius: 5px;
|
|
// background-color: #eee;
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.trialsBox {
|
|
margin: auto;
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
background-color: #eee;
|
|
}
|
|
.trialsForm {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style> |