jk-temporary-workers-portal/src/views/base/companyPayment-detail.vue

<template>
      <el-dialog
        :visible.sync="showDialog"
        :title="title"
        :modal-append-to-body="false"
        style="text-align: left"
        @close="closeDialog"
        :close-on-click-modal="false"
      >
      <div class="user-panel" v-loading="loading">
        <el-form
            ref="form"
            :model="formModel"
            :rules="ruleValidate"
            :label-width="'180px'"
            inline
        >
            <el-form-item label="物业公司" prop="companyId">
                <el-select v-model="formModel.companyId" filterable>
                    <el-option
                        v-for="result in companyList"
                        :key="result.id"
                        :label="result.name"
                        :value="result.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账户名称" prop="name">
                <el-input
                    v-model="formModel.name"
                    placeholder="请输入账户名称"
                    style="width: 500px"
                ></el-input>
            </el-form-item>
            <el-form-item label="微信mchId" prop="mchId">
                <el-input
                    v-model="formModel.mchId"
                    placeholder="请输入微信mchId"
                    style="width: 500px"
                ></el-input>
            </el-form-item>
            <el-form-item label="微信subMchId" prop="subMchId">
                <el-input
                    v-model="formModel.subMchId"
                    placeholder="请输入微信subMchId"
                    style="width: 500px"
                ></el-input>
            </el-form-item>
            <el-form-item label="支付宝appAuthToken" prop="appAuthToken">
                <el-input
                    v-model="formModel.appAuthToken"
                    placeholder="请输入支付宝appAuthToken"
                    style="width: 500px"
                ></el-input>
            </el-form-item>

        </el-form>
      </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting"
            >确 定</el-button
        >
        </span>
      </el-dialog>
      
</template>
<script>
import Constant from "@/constant";
import companyPaymentApi from "@/api/base/companyPayment";
import companyInfoApi from "@/api/base/companyInfo";
export default {
    props: ["businessKey", "title"],
    data() {
        return {
            ruleValidate: {
                companyId: [{ required: true, message: "物业公司不能为空", trigger: "blur" }],
                name: [{ required: true, message: "账户名称不能为空", trigger: "blur" }],
                mchId: [{ required: true, message: "微信mchId不能为空", trigger: "blur" }],
                subMchId: [{ required: true, message: "微信subMchId不能为空", trigger: "blur" }],
                appAuthToken: [{ required: true, message: "支付宝appAuthToken不能为空", trigger: "blur" }],
            },
            formModel:{
                companyId:"",
                name:"",
                mchId:"",
                subMchId:"",
                appAuthToken:"",
            },
            companyList:[],
            showDialog: true,
            loading: false,
            submitting: false,
        }
    },
    methods: {
        closeDialog() {
            this.$emit("close", false);
        },
        handleSubmit() {
            var self = this;

            this.$refs["form"].validate((valid) => {
                if (valid) {
                (function () {
                    var id = self.formModel.id;

                    alert(JSON.stringify(self.formModel))

                    if (id == null || id.length == 0) {
                        return companyPaymentApi.add(self.formModel);
                    } else {
                        return companyPaymentApi.update(self.formModel);
                    }
                })().then(function (response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                    self.$message({
                        message: "保存成功!",
                        type: "success",
                    });

                    self.$emit("close", true);
                    } else {
                    self.$message({
                        message: jsonData.message + "",
                        type: "warning",
                    });

                    self.$emit("close", false);
                    }
                });
                }
            });
        },
    },
    mounted: function () {
        var self = this;

        companyInfoApi.list().then((resp) => {
            var jsonData = resp.data;
            this.companyList = jsonData.data;
        });

        (function () {
        if (self.businessKey.length == 0) {
            return companyPaymentApi.create();
        } else {
            return companyPaymentApi.edit(self.businessKey);
        }
        })()
        .then((response) => {
            var jsonData = response.data;
            self.loading = false;

            if (jsonData.result) {
            self.formModel = jsonData.data;
            } else {
            self.$message.error(jsonData.message + "");
            }
        })
        .catch((error) => {
            self.$message.error(error + "");
        });
    },
}
</script>
<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>