real3d-portalsite/src/views/ConstructionApplication3D/Demolition/ZDSetInfo.vue

<template>
    <!-- @blur="selectBlur($event, index)"  -->
    <div style="width: 100%;padding: 1rem;">
        <el-row >
            <el-col :span="6">征地补偿标准：</el-col>
            <el-col :span="18">
                <el-select v-model="bcbz" style="width: 90%;" @change="selectZDBZ" placeholder="请选择">
                    <el-option v-for=" item in bcbzList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row class="subtitle">
            <el-col :span="12">统一年产值</el-col>
        </el-row>
        <el-row>
            <el-col :span="6">土地年产值：</el-col>
            <el-col :span="16"><el-input style="width: 100%;" type="number" placeholder="请输入" v-model="curBCBZ.BCBZ.TDCZ"
                    @change="changeZDBZ"></el-input>
            </el-col>
            <el-col :span="2">元/亩</el-col>
        </el-row>
        <el-row class="subtitle">
            <el-col :span="12">土地补偿费</el-col>
            <el-col :span="12" style="font-size: small;color: aqua;">统一年产值 X 综合补偿倍数</el-col>
        </el-row>
        <el-row>
            <el-col :span="6">综合补偿倍数：</el-col>
            <el-col :span="16"><el-input style="width: 100%;" type="number" placeholder="请输入" v-model="curBCBZ.BCBZ.TDBCBS"
                    @change="changeZDBZ"></el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="6">土地补偿费：</el-col>
            <el-col :span="16">
                <el-input placeholder="自动计算" readonly v-model="curBCBZ.BCBZ.TDBCF"></el-input></el-col>
            <el-col :span="2">元/亩</el-col>
        </el-row>
        <el-row class="subtitle">
            <el-col :span="12">安置补偿费</el-col>
            <el-col :span="12" style="font-size: small;color: aqua;">统一年产值 X 综合补偿倍数</el-col>
        </el-row>
        <el-row>
            <el-col :span="6">综合补偿倍数</el-col>
            <el-col :span="16"><el-input type="number" style="width: 100%;" placeholder="请输入" v-model="curBCBZ.BCBZ.AZBCBS"
                    @change="changeZDBZ"></el-input></el-col>
        </el-row>
        <el-row>
            <el-col :span="6">安置补偿费：</el-col>
            <el-col :span="16"><el-input v-model="curBCBZ.BCBZ.AZBCF" readonly placeholder="自动计算"></el-input></el-col>
            <el-col :span="2">元/亩</el-col>
        </el-row>
        <el-row class="subtitle">
            <el-col :span="12">补偿费及安置补助费合计</el-col>
            <el-col :span="12" style="font-size: small;color: aqua;">统一年产值 X 综合补偿倍数</el-col>
        </el-row>
        <el-row >
            <el-col :span="6">征地补偿合计：</el-col> <el-col :span="16"><el-input v-model="curBCBZ.BCBZ.BCHJ" readonly
                    placeholder="自动计算"></el-input></el-col> <el-col :span="2">元/亩</el-col>
        </el-row>
        <el-row justify="center" type="flex">
                <el-button type="primary" @click="save()">保存</el-button>
                <el-button type="primary" @click="saveAs()">另存为</el-button>
                <el-button type="primary" @click="reset()">重置</el-button>
        </el-row>
        <el-dialog title="标准名称设置" modal="false" :visible.sync="dialogFormVisible" modal-append-to-body>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: ["zdValue"],
    name: 'ZDShowInfo',
    data() {
        return {
            dialogFormVisible: false,
            ruleForm: {
                name: null,

            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ]
            },
            /**
             * 补偿标准绑定值
             */
            bcbz: '',
            // curLabel: '',
            /**
             * 补偿标准列表
             */
            bcbzList: JSON.parse(JSON.stringify(window.ZSBC.ZDBCList)),
            /**
             * 当前标准
             */
            curBCBZ: {
                label: "",
                value: "",
                BCBZ: {
                    /** 
                     * 土地统一年产值
                     */
                    TDCZ: 0,
                    /**
                     * 土地补偿倍数
                     */

                    TDBCBS: 0,
                    /**
                     * 土地补偿费
                     */
                    TDBCF: 0,
                    /**
                     * 安置补偿倍数
                     */

                    AZBCBS: 0,
                    /**
                     * 安置补偿费
                     */
                    AZBCF: 0,
                    /**
                     * 补偿合计
                     */
                    BCHJ: 0,
                }
            }
        }
    },
    mounted() {
        this.initForm()
    },
    methods:
    {
        initForm() {
            debugger
            if (this.zdValue && this.zdValue != "") {
                this.bcbz = this.zdValue
                var item = this.bcbzList.find(t => t.value == this.bcbz)
                this.curBCBZ = item
            }
        },
        selectZDBZ() {
            debugger
            if (this.bcbz && this.bcbz != "") {
                this.curBCBZ = this.bcbzList.find(t => t.value == this.bcbz)
            }
            this.changeZDBZ()
        },
        /**
         * 选择标准改变
         */
        changeZDBZ() {

            this.curBCBZ.BCBZ.TDBCF = this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.TDBCBS
            this.curBCBZ.BCBZ.AZBCF = this.curBCBZ.BCBZ.TDCZ * this.curBCBZ.BCBZ.AZBCBS
            this.curBCBZ.BCBZ.BCHJ = this.curBCBZ.BCBZ.TDBCF + this.curBCBZ.BCBZ.AZBCF

        },
        /**
         * 重置
         */
        reset() {
            // var val = this.bcbz
            this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.ZDBCList))
            var item = this.bcbzList.find(t => t.value == this.bcbz)
            debugger
            this.curBCBZ = {
                label: item.label, value: item.value, BCBZ: {
                    /** 
                     * 土地统一年产值
                     */
                    TDCZ: item.BCBZ.TDCZ,
                    /**
                     * 土地补偿倍数
                     */

                    TDBCBS: item.BCBZ.TDBCBS,
                    /**
                     * 土地补偿费
                     */
                    TDBCF: item.BCBZ.TDBCF,
                    /**
                     * 安置补偿倍数
                     */

                    AZBCBS: item.BCBZ.AZBCBS,
                    /**
                     * 安置补偿费
                     */
                    AZBCF: item.BCBZ.AZBCF,
                    /**
                     * 补偿合计
                     */
                    BCHJ: item.BCBZ.BCHJ,
                }
            }

            //     var item = this.bcbzList.find(t => t.value == this.bcbz)
            // this.bcbz = val;
        },
        /**
         * 保存修改
         */
        save() {
            if (this.bcbz == "") {
                this.$layer.alert("请选择补偿标准");
                return;
            }
            debugger
            var index = window.ZSBC.ZDBCList.findIndex(t => t.value == this.bcbz)
            if (index > -1) {
                window.ZSBC.ZDBCList[index] = this.curBCBZ
                this.$layer.alert("保存完成");
            }

        },
        /***
         * 另存为
         */
        saveAs() {
            // if (this.bcbz == "") {
            //     this.$layer.alert("请选择补偿标准");
            //     return
            // }
            this.dialogFormVisible = true;


        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.dialogFormVisible = false
                    this.saveData()
                    // this.$layer.alert("保存完成");
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 另存数据
         */
        saveData() {
            debugger
            var val = (window.ZSBC.ZDBCList.length + 1).toString()
            var newBCBZ = {

                label: this.ruleForm.name,
                value: val,
                BCBZ: {
                    /** 
                                 * 土地统一年产值
                                 */
                    TDCZ: this.curBCBZ.BCBZ.TDCZ,
                    /**
                     * 土地补偿倍数
                     */

                    TDBCBS: this.curBCBZ.BCBZ.TDBCBS,
                    /**
                     * 土地补偿费
                     */
                    TDBCF: this.curBCBZ.BCBZ.TDBCF,
                    /**
                     * 安置补偿倍数
                     */

                    AZBCBS: this.curBCBZ.BCBZ.AZBCBS,
                    /**
                     * 安置补偿费
                     */
                    AZBCF: this.curBCBZ.BCBZ.AZBCF,
                    /**
                     * 补偿合计
                     */
                    BCHJ: this.curBCBZ.BCBZ.BCHJ,
                },
            }
            window.ZSBC.ZDBCList.push(newBCBZ)
            this.bcbzList = window.ZSBC.ZDBCList;
            this.bcbz = val
        }



    }
}
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>
<style scoped>
.el-row 
{
    margin-bottom: 0.5rem;
}
.subtitle {
    color: #02a7f0;
    font-weight: 400;
}

/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
{
    color: #fff !important;
    background-color: rgba(4, 28, 50, 0.5) !important;
    border: 1px solid rgba(15, 122, 200, 0.4) !important;
    text-align: center;

} */
/* .el-input
{
   text-align: center;
} */
</style>