|
|
@@ -0,0 +1,103 @@
|
|
|
+<template>
|
|
|
+ <div class="approval-opinion">
|
|
|
+ <el-radio-group v-model="opinionType" @change="handleTypeChange">
|
|
|
+ <el-radio label="agree">同意</el-radio>
|
|
|
+ <el-radio label="disagree">不同意</el-radio>
|
|
|
+ <el-radio label="custom">自定义</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-input
|
|
|
+ v-if="opinionType === 'custom'"
|
|
|
+ v-model="customOpinion"
|
|
|
+ type="textarea"
|
|
|
+ :rows="rows"
|
|
|
+ :maxlength="maxLength"
|
|
|
+ :show-word-limit="!!maxLength"
|
|
|
+ placeholder="请输入自定义审批意见"
|
|
|
+ @input="emitOpinion"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ /** 流程审批意见三选一,向原有表单输出最终意见文本。 */
|
|
|
+ export default {
|
|
|
+ name: 'ApprovalOpinion',
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: String,
|
|
|
+ default: '同意'
|
|
|
+ },
|
|
|
+ rows: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ },
|
|
|
+ maxLength: {
|
|
|
+ type: Number,
|
|
|
+ default: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ opinionType: this.getOpinionType(this.value),
|
|
|
+ customOpinion: this.isPreset(this.value) ? '' : this.value || '',
|
|
|
+ selectedByUser: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value(value) {
|
|
|
+ if (this.opinionType === 'custom' && value === this.customOpinion) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const type = this.getOpinionType(value);
|
|
|
+ this.opinionType = type;
|
|
|
+ if (type === 'custom') {
|
|
|
+ this.customOpinion = value || '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ isPreset(value) {
|
|
|
+ return value === '同意' || value === '不同意';
|
|
|
+ },
|
|
|
+ getOpinionType(value) {
|
|
|
+ if (value === '不同意') {
|
|
|
+ return 'disagree';
|
|
|
+ }
|
|
|
+ return value === '同意' ? 'agree' : 'custom';
|
|
|
+ },
|
|
|
+ /** 校验意见,并使默认意见与驳回操作一致。 */
|
|
|
+ validate(status) {
|
|
|
+ if (status === 0 && !this.selectedByUser && this.opinionType === 'agree') {
|
|
|
+ this.opinionType = 'disagree';
|
|
|
+ this.$emit('input', '不同意');
|
|
|
+ }
|
|
|
+ if (this.opinionType === 'custom' && !this.customOpinion.trim()) {
|
|
|
+ this.$message.warning('请输入自定义审批意见');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ handleTypeChange(type) {
|
|
|
+ this.selectedByUser = true;
|
|
|
+ if (type === 'agree') {
|
|
|
+ this.$emit('input', '同意');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (type === 'disagree') {
|
|
|
+ this.$emit('input', '不同意');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$emit('input', this.customOpinion);
|
|
|
+ },
|
|
|
+ emitOpinion() {
|
|
|
+ this.$emit('input', this.customOpinion);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .approval-opinion .el-textarea {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+</style>
|