155 lines
4.9 KiB
Vue
155 lines
4.9 KiB
Vue
<template>
|
||
<div class="user-audit-opinion-textarea">
|
||
<el-input type="textarea" :rows="3" v-model="content" v-bind="$attrs" @change="onChange" @blur="onBlur"></el-input>
|
||
<div class="opinion-wrap" v-if="showCommonOpinion">
|
||
<div class="title">常用审核意见：</div>
|
||
<el-select v-model="selectOpinion" placeholder="可选择常用审核意见" size="small" @change="selectOpinionChange">
|
||
<el-option v-for="item in opinionOptions" :key="item.id" :label="item.text" :value="item.text"></el-option>
|
||
</el-select>
|
||
<div class="settings">
|
||
<el-link type="primary" @click="openSetting">自定义</el-link>
|
||
</div>
|
||
</div>
|
||
|
||
<el-dialog v-if="showCommonOpinion" title="设置常用意见" :visible.sync="dialogVisible" width="50%" append-to-body>
|
||
<el-table :data="tableOpinionData" key="id">
|
||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||
<el-table-column label="意见内容">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.text" placeholder="请输入意见内容" max="50"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="100px">
|
||
<template #header>
|
||
<el-button type="primary" size="mini" @click="pushNewOpinion">添加</el-button>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-button type="danger" size="mini" @click="tableOpinionData.splice(scope.$index, 1)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="updateOpinion">提交</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
name: "index",
|
||
props: {
|
||
value: String,
|
||
showCommonOpinion: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
content: null,
|
||
tableOpinionData: [],
|
||
opinionOptions: [],
|
||
selectOpinion: null,
|
||
dialogVisible: false
|
||
}
|
||
},
|
||
watch: {
|
||
value: {
|
||
handler: function (val) {
|
||
this.content = val
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
onChange(val) {
|
||
this.$emit("input", val)
|
||
},
|
||
onBlur(val) {
|
||
this.$emit("blur", this.content)
|
||
},
|
||
selectOpinionChange(val) {
|
||
this.$emit("input", val)
|
||
},
|
||
openSetting() {
|
||
this.dialogVisible = true
|
||
this.listOpinion()
|
||
},
|
||
pushNewOpinion() {
|
||
if (this.tableOpinionData.length === 10) {
|
||
this.$message.error("最多可添加10条审批意见")
|
||
return
|
||
}
|
||
|
||
const id = Math.max(...this.tableOpinionData.map((v) => v.id), 0)
|
||
this.tableOpinionData.push({ id: id + 1, text: "" })
|
||
},
|
||
updateOpinion() {
|
||
this.$axios
|
||
.post("/platform/sys/userApproval/opinion/update", {
|
||
opinions: JSON.stringify(this.tableOpinionData)
|
||
})
|
||
.then((res) => {
|
||
if (res.code === 0) {
|
||
this.$message.success("设置成功")
|
||
this.dialogVisible = false
|
||
this.listOpinion()
|
||
}
|
||
})
|
||
},
|
||
listOpinion() {
|
||
this.$axios.get("/platform/sys/userApproval/opinion/list").then((res) => {
|
||
if (res.code === 0) {
|
||
this.tableOpinionData = res.data || []
|
||
this.opinionOptions = res.data || []
|
||
}
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
// 常用意见为公共可选能力；页面关闭该能力时不再发起无用的初始化查询。
|
||
if (this.showCommonOpinion) {
|
||
this.listOpinion()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-audit-opinion-textarea {
|
||
border: 1px solid var(--border-color-base);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.user-audit-opinion-textarea:focus {
|
||
border-color: var(--color-primary);
|
||
}
|
||
|
||
.user-audit-opinion-textarea textarea {
|
||
border: none;
|
||
}
|
||
|
||
.user-audit-opinion-textarea:focus {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.user-audit-opinion-textarea .opinion-wrap .title {
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
|
||
.opinion-wrap {
|
||
padding: 5px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
}
|
||
|
||
.opinion-wrap .settings {
|
||
text-align: right;
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|