easydo-zcgx-web/src/views/policyStrive/explain.vue

<template>
    <el-form v-if="disabled && form.monthSituation || !disabled" ref="formRef" :model="form" :rules="rules" :disabled="disabled" label-width="110px">
        <div class="dialog-title">月度争取情况说明</div>
        <el-row>
            <el-col :span="12">
                <el-form-item label="是否已落地" prop="isLand">
                    <el-radio-group v-model="form.isLand" @change="form.landAmount = null, form.partPerson = null, form.partPersonArr = '[]'">
                        <el-radio v-for="(label, key) in whetherDic" :key="key" :label="label" :value="parseInt(key)"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <template v-if="form.isLand == 1">
                <el-col :span="12">
                    <el-form-item label="落地金额" prop="landAmount">
                        <el-input-number v-model="form.landAmount" :min="0" :step="0.1" :precision="2" controls-position="right" placeholder="请输入落地金额"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="参与人" prop="partPerson">
                        <el-input v-model="form.partPerson" type="textarea" :rows="4" placeholder="请输入参与人(以英文 , 分割)"></el-input>
                    </el-form-item>
                </el-col>
            </template>
            <el-col :span="24">
                <el-form-item class="label-column-2" label="月度争取情况说明" prop="monthSituation" label-width="80px">
                    <el-input v-model="form.monthSituation" type="textarea" :rows="4" placeholder="请输入月度争取情况说明"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import API from "@/api/policy/strive";
import { whetherDic } from "@/views/policyShare/main";

export default {
    props: {
        isMaster: { type: Boolean, default: false },
        disabled: { type: Boolean, default: true },
        rowData: { type: Object, default: () => {} }
    },

    data() {
        return {
            whetherDic,

            form: {
                isLand: 0,
                landAmount: null,
                partPersonArr: "[]", // [{name: }]
                partPerson: null, // a1,a2
                monthSituation: null,
            },

            rules: {
                isLand: [{ required: true }],
                landAmount: [{ required: true, message: "请输入落地金额" }],
                partPerson: [{ required: true, message: "请输入参与人(以英文 , 分割)" }],
                monthSituation: [{ required: true, message: "请输入月度争取情况" }]
            },
        }
    },

    watch: {
        rowData: {
            deep: true,
            handler(value) {
                if (value.id) {
                    this.form = Object.assign({}, this.rowData);
                }
            }
        }
    },

    mounted() {
        this.form = Object.assign({}, this.rowData);
    },

    methods: {
        submit() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    const partPersonArr = this.form.partPerson && JSON.stringify(this.form.partPerson.split(",").map(name => ({ name }))) || "";
                    API.explain({ ...this.form, partPersonArr }).then(() => {
                        ElMessage.success("操作成功");
                        this.visible = false;
                        this.$emit("success");
                    });
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-title {
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.el-input-number {
  width: 100%;

  :deep(.el-input) .el-input__wrapper {
    padding: 1px 11px;

    .el-input__inner {
      text-align: unset;
    }
  }
}

.label-column-2 :deep(.el-form-item__label) {
  margin-left: 30px;
}
</style>