lift-web/src/apps/mobile/views/operation-bank/other-settings/index.vue

<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="当前设置" name="1"></el-tab-pane>
                <el-tab-pane label="待审核" name="2"></el-tab-pane>
                <el-tab-pane label="待提交" name="3"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="content-box">
            <el-form :model="formData" :rules="rules" ref="formData" label-width="180px">
                <el-form-item label="平台选择专家默认收费:" prop="appointExpertPrice">
                    <el-input
                        v-model="formData.appointExpertPrice"
                        :disabled="!show"
                        placeholder="请输入"
                        maxlength="10"
                    ></el-input>
                </el-form-item>
                <el-form-item label="附近人范围:" prop="nearPeopleArea">
                    <el-input v-model="formData.nearPeopleArea" :disabled="!show" placeholder="请输入" maxlength="10">
                        <template slot="append">公里</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="税率:" prop="defaultTax">
                    <el-input v-model="formData.defaultTax" :disabled="!show" placeholder="请输入" maxlength="10">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="单次提现上限金额:" prop="withdrawFee">
                    <el-input v-model="formData.withdrawFee" :disabled="!show" placeholder="请输入" maxlength="10">
                    </el-input>
                </el-form-item>
                <el-form-item label="每月提现次数:" prop="withdrawNum">
                    <el-input v-model="formData.withdrawNum" :disabled="!show" placeholder="请输入" maxlength="10">
                    </el-input>
                </el-form-item>
                <el-form-item label="专家出诊打卡范围:" prop="clockInArea">
                    <el-input v-model="formData.clockInArea" :disabled="!show" placeholder="请输入" maxlength="10">
                        <template slot="append">米</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="间隔时间:" prop="intervalTime">
                    <el-input v-model="formData.intervalTime" :disabled="!show" placeholder="请输入" maxlength="10">
                        <template slot="append">分钟</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="经纬度推送开关:" prop="isPush">
                    <el-switch
                        v-model="formData.isPush"
                        active-text="开"
                        inactive-text="关"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="!show"
                    ></el-switch>
                </el-form-item>
            </el-form>

            <div class="btn">
                <el-button type="primary" round v-if="activeName == '3'" @click="reset">重置</el-button>
                <el-button type="primary" round v-if="activeName == '3'" @click="submit('save')">保存</el-button>
                <el-button
                    type="primary"
                    :disabled="btndisabled"
                    round
                    v-if="activeName == '3'"
                    @click="submit('submit')"
                >提交</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import {
    addData,
    addDataSave,
    removeData,
    editData,
    examine,
    queryNew,
    queryHistory,
    queryCommit,
    queryStay,
    submitData,
} from '@/apps/mobile/api/operation/other-settings/index';
import { validWithoutZero, validPositiveInteger } from '@/apps/mobile/utils/validate';
export default {
    components: {
        TitleBar,
    },
    data() {
        var checkPrice = (rule, value, callback) => {
            if (value && !validWithoutZero(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        // 正整数校验
        var checkNum = (rule, value, callback) => {
            if (value && !validPositiveInteger(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            input: '',
            rules: {
                appointExpertPrice: [
                    { required: true, message: '请输入平台选择专家最低费用' },
                    { validator: checkPrice, message: '请输入正确的费用', trigger: 'blur' },
                ],
                nearPeopleArea: [
                    { required: true, message: '请输入附近人范围数' },
                    { validator: checkPrice, message: '请输入正确的范围数', trigger: 'blur' },
                ],
                defaultTax: [
                    { required: true, message: '请输入税率' },
                    { validator: checkPrice, message: '请输入正确的税率', trigger: 'blur' },
                ],
                withdrawFee: [
                    { required: true, message: '请输入单次提现上限金额' },
                    { validator: checkPrice, message: '请输入正确的单次提现上限金额', trigger: 'blur' },
                ],
                withdrawNum: [
                    { required: true, message: '请输入每月提现次数' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                clockInArea: [
                    { required: true, message: '请输入打卡范围' },
                    { validator: checkNum, message: '请输入正整数', trigger: 'blur' },
                ],
                intervalTime: [
                    { required: true, message: '请输入间隔时间' },
                    { validator: checkPrice, message: '请输入正确的分钟数', trigger: 'blur' },
                ],
                is_push: [
                    { required: false }
                ],              
            },
            formData: {},
            activeName: '1',
            show: 0,
            btndisabled: false,
            id: null, //待提交数据ID
            auditId: null, //待审核id
            editobj: {}, // 储存待提交的数据
            theSame: true, // 待提交的数据是否改变 false改变  true未变
        };
    },
    methods: {
        /**
         * 提交或保存操作
         * @param {String} type 操作类型 'save' 保存操作 'sunmit' 提交操作
         */
        submit(type) {
            this.$refs.formData.validate(valid => {
                if (valid) {
                    let obj = this.formData;
                    let submitObj = {
                        appointExpertPrice: obj.appointExpertPrice,
                        nearPeopleArea: obj.nearPeopleArea,
                        defaultTax: obj.defaultTax,
                        withdrawFee: obj.withdrawFee,
                        withdrawNum: obj.withdrawNum,
                        clockInArea: obj.clockInArea,
                        intervalTime: obj.intervalTime,
                        isPush: obj.isPush,
                    };
                    if (type === 'save') {
                        if (this.id && this.theSame) return this.$message.warning('未做修改!');
                        // 如果有改变,修改当前保存的数据,需要提交id
                        if (this.id && !this.theSame) {
                            submitObj.id = this.id;
                        }
                        addDataSave(submitObj)
                            .then(res => {
                                console.log(res);
                                if (res.statusCode === '1') {
                                    this.$message.success(res.message);
                                    this.id = res.data;
                                } else {
                                    this.$message.warning(res.message);
                                }
                                this.btndisabled = false;
                                this.queryCommitData();
                            })
                            .catch(() => {
                                this.btndisabled = false;
                            });
                    } else {
                        // 提交操作
                        if (this.id) {
                            // 有待提交数据,提交
                            submitData(this.id)
                                .then(res => {
                                    console.log(res);
                                    if (res.statusCode === '1') {
                                        this.$message.success(res.message);
                                        this.id = null;
                                        this.btndisabled = false;
                                        this.$refs['formData'].resetFields();
                                        this.formData = {};
                                    } else {
                                        this.$message.error(res.message);
                                    }
                                })
                                .catch(() => {
                                    this.btndisabled = false;
                                });
                        } else {
                            // 没有待提交数据,新增
                            addData(submitObj)
                                .then(res => {
                                    if (res.statusCode === '1') {
                                        this.$message.success(res.message);
                                        this.btndisabled = false;
                                        this.$refs['formData'].resetFields();
                                        this.formData = {};
                                    } else {
                                        this.$message.warning(res.message);
                                    }
                                })
                                .catch(() => {
                                    this.btndisabled = false;
                                });
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        reset() {
            this.formData = {};
            this.$refs.formData.resetFields();
        },
        // 进入审批页面调用
        showChange() {
            this.show = 0;
            this.queryNewData();
        },
        // 点击标签页
        handleClick(tab) {
            console.log(tab, 'activeName');
            if (tab.name === '1') {
                // 查询当前设置
                this.queryNewData();
            }
            if (tab.name === '2') {
                // 查询待审核的
                this.queryStayData();
            }
            if (tab.name === '3') {
                // 查询待提交的
                this.queryCommitData();
            }
        },

        // 查询待审核
        queryStayData() {
            queryStay()
                .then(res => {
                    console.log(res);
                    if (res.data && res.data.length > 0) {
                        this.formData = res.data.pop();
                        this.auditId = this.formData.id;
                    } else {
                        this.auditId = null;
                        this.reset();
                    }
                })
                .catch(err => err);
        },

        // 查询最新版本
        queryNewData() {
            if (this.activeName === '1') {
                queryNew()
                    .then(res => {
                        console.log(res, '最新');
                        if (res.data.id) {
                            this.formData = res.data;
                        } else {
                            this.reset();
                        }
                    })
                    .catch(err => err);
            }
        },
        // 查询待提交的数据
        queryCommitData() {
            queryCommit()
                .then(res => {
                    console.log(res);
                    if (res.data && res.data.length > 0) {
                        this.formData = res.data.pop();
                        this.editobj = Object.assign({
                            ...this.formData,
                        });
                        this.id = this.formData.id;
                    } else {
                        this.id = null;
                        this.reset();
                    }
                })
                .catch(err => err);
        },
        // 审批
        approval(data) {
            examine(data).then(res => {
                if (res.statusCode === '1') {
                    this.$message.success(res.message);
                    this.auditId = null;
                    this.queryStayData();
                } else {
                    this.$message.warning(res.message);
                }
            });
        }
    },
    created() {
        // 如果是设置页面,查询待提交的数据
        this.$nextTick(() => {
            this.queryNewData();
        });
    },
    watch: {
        // 判断用户是都修改了数据
        formData: {
            handler(newVal) {
                if (JSON.stringify(newVal) !== JSON.stringify(this.editobj)) {
                    this.theSame = false;
                } else {
                    this.theSame = true;
                }
            },
            deep: true,
        },
        activeName(val){
            if(val == 3){
                this.show = 1;
            }
            else{
                this.show = 0;
            }
        }
    },
};
</script>
<style scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}

.el-input {
    width: 200px;
}

::v-deep .el-input-group__append {
    background-color: #fff;
    border: none;
    color: #000;
}

::v-deep .el-input__inner {
    width: auto;
}

.content-box {
    margin-left: 100px;
    margin-top: 20px;
}

.btn {
    margin-left: 250px;
    margin-top: 100px;
}
</style>