<template>
|
<el-dialog
|
:title="!uuid ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
@close="handClose"
|
width="600px"
|
:visible.sync="visible"
|
>
|
<el-form
|
:model="dataForm"
|
:rules="dataRule"
|
ref="dataForm"
|
@keyup.enter.native="dataFormSubmit()"
|
label-width="100px"
|
>
|
<el-form-item label="用户名" prop="userName">
|
<el-input
|
v-model="dataForm.userName"
|
placeholder="用户名"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="dataForm.name" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="国籍" prop="citizenship">
|
<el-select
|
v-model="dataForm.citizenship"
|
placeholder="请选择国籍"
|
style="width: 100%"
|
filterable
|
>
|
<el-option
|
v-for="item in countryOptions"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="居住地址" prop="address">
|
<el-input
|
v-model="dataForm.address"
|
type="textarea"
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
placeholder="请输入居住地址"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="外国税号" prop="foreignTIN">
|
<el-input
|
v-model="dataForm.foreignTIN"
|
placeholder="请输入外国税号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="美国税号" prop="usTIN">
|
<el-input
|
v-model="dataForm.usTIN"
|
placeholder="请输入美国税号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="税收协定" prop="treatyBenefits">
|
<el-input
|
v-model="dataForm.treatyBenefits"
|
type="textarea"
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
placeholder="请输入税收协定"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { Debounce } from "@/utils/debounce";
|
import { countries } from "@/utils/countryList";
|
|
export default {
|
data() {
|
return {
|
visible: false,
|
uuid: "",
|
dataForm: {
|
uuid: "",
|
userName: "",
|
name: "",
|
citizenship: "",
|
address: "",
|
foreignTIN: "",
|
usTIN: "",
|
treatyBenefits: "",
|
},
|
countryOptions: [],
|
dataRule: {
|
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
citizenship: [
|
{ required: true, message: "国籍不能为空", trigger: "change" },
|
],
|
address: [
|
{ required: true, message: "居住地址不能为空", trigger: "blur" },
|
],
|
},
|
};
|
},
|
mounted() {
|
this.initCountryOptions();
|
},
|
methods: {
|
init(row, uuid) {
|
this.resClear();
|
this.uuid = uuid || "";
|
if (row) {
|
this.dataForm = { ...row };
|
}
|
this.visible = true;
|
this.$nextTick(() => {
|
this.$refs["dataForm"].clearValidate();
|
});
|
},
|
initCountryOptions() {
|
const countryList = countries["zh-CN"] || countries["en"];
|
this.countryOptions = Object.keys(countryList).map((key) => ({
|
code: key,
|
name: countryList[key].name,
|
}));
|
this.countryOptions.sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
|
},
|
resClear() {
|
this.dataForm = {
|
uuid: "",
|
userName: "",
|
name: "",
|
citizenship: "",
|
address: "",
|
foreignTIN: "",
|
usTIN: "",
|
treatyBenefits: "",
|
};
|
},
|
handClose() {
|
this.$data.dataForm = JSON.parse(
|
JSON.stringify(this.$options.data().dataForm)
|
);
|
this.$nextTick(() => {
|
this.$refs["dataForm"].clearValidate();
|
});
|
},
|
dataFormSubmit: Debounce(function () {
|
this.$refs["dataForm"].validate((valid) => {
|
if (valid) {
|
this.$http({
|
url: this.$http.adornUrl(
|
this.uuid ? `/w8ben/update` : `/w8ben/add`
|
),
|
method: "post",
|
data: this.$http.adornData({
|
uuid: this.dataForm.uuid,
|
userName: this.dataForm.userName,
|
name: this.dataForm.name,
|
citizenship: this.dataForm.citizenship,
|
address: this.dataForm.address,
|
foreignTIN: this.dataForm.foreignTIN,
|
usTIN: this.dataForm.usTIN,
|
treatyBenefits: this.dataForm.treatyBenefits,
|
}),
|
}).then(({ data }) => {
|
if (data.code == 0) {
|
this.$message({
|
message: "操作成功",
|
type: "success",
|
duration: 1500,
|
onClose: () => {
|
this.resClear();
|
this.visible = false;
|
this.$emit("refreshDataList");
|
},
|
});
|
} else {
|
this.$message({
|
message: data.msg,
|
type: "error",
|
});
|
}
|
});
|
}
|
});
|
}),
|
},
|
};
|
</script>
|
|
<style scoped>
|
</style>
|
