|
|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :title="title"
|
|
|
+ :width="width"
|
|
|
+ :visible="visible"
|
|
|
+ :bodyStyle="bodyStyle"
|
|
|
+ :confirmLoading="confirmLoading"
|
|
|
+ @ok="handleOk"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ :maskClosable="false"
|
|
|
+ :footer="null"
|
|
|
+ cancelText="关闭">
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <a-form :form="form">
|
|
|
+
|
|
|
+ <a-form-item label="平台名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'platformName', validatorRules.platformName]" placeholder="请输入平台名称"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'enterpriseName', validatorRules.enterpriseName]" placeholder="请输入企业名称"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="所在地区" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
|
|
|
+ <a-cascader :options="options" :value="arr" @change="onChange" placeholder="请选择所在地区"
|
|
|
+ changeOnSelect/>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'address', validatorRules.address]" placeholder="请输入详细地址"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'contactPerson', validatorRules.contactPerson]" placeholder="请输入联系人"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'mobilePhone', validatorRules.mobilePhone]" placeholder="请输入手机号"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item label="固定电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
|
+ <a-input v-decorator="[ 'phone', validatorRules.phone]" placeholder="请输入固定电话"></a-input>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ </a-form>
|
|
|
+ </a-spin>
|
|
|
+ <div class="drawer-bootom-button" v-show="!disableSubmit">
|
|
|
+ <a-button class="ant-btn" @click="handleCancel">取消</a-button>
|
|
|
+ <a-button class="ant-btn ant-btn-primary" style="margin-left: 8px" @click="handleOk">确定</a-button>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import { httpAction } from '@/api/manage'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+ import JDate from '@/components/jeecg/JDate'
|
|
|
+ import data1 from '../../tools/area.json'
|
|
|
+ import { duplicateCheck } from '@/api/api'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "HlgPlatformModal",
|
|
|
+ components: {
|
|
|
+ JDate,
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ title:"操作",
|
|
|
+ width:800,
|
|
|
+ bodyStyle: {
|
|
|
+ paddingTop: '20px',
|
|
|
+ paddingBottom:'50px',
|
|
|
+ height: (window.innerHeight * 0.62) + 'px',
|
|
|
+ 'overflow-y': 'auto'
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ model: {},
|
|
|
+ disableSubmit:false,
|
|
|
+ arr:[], //存放回显默认省市区code
|
|
|
+ provArray: [], //存放省
|
|
|
+ cityArray: [], //存放市
|
|
|
+ countryArray:[], //存放区
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ options: [{
|
|
|
+ value: '',
|
|
|
+ label: '',
|
|
|
+ isLeaf: false
|
|
|
+ }],
|
|
|
+ confirmLoading: false,
|
|
|
+ validatorRules:{
|
|
|
+ platformName:{rules: [{ required: true, message: '请输入平台名称!' },{
|
|
|
+ validator: this.validateCompanyAbbreviation
|
|
|
+ }]},
|
|
|
+ enterpriseName:{rules: [{ required: true, message: '请输入企业名称!' }]},
|
|
|
+ address:{},
|
|
|
+ contactPerson:{},
|
|
|
+ mobilePhone:{rules: [{ validator: this.validatePhone }] },
|
|
|
+ phone:{},
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ add: "/hlgplatform/hlgPlatform/add",
|
|
|
+ edit: "/hlgplatform/hlgPlatform/edit",
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ //省市区options完全拼接
|
|
|
+ for (var i = 0; i < data1.length; i++) {
|
|
|
+ this.cityArray=[]
|
|
|
+ for (let j = 0; j < data1[i].cityList.length; j++) {
|
|
|
+ this.countryArray=[]
|
|
|
+ for (let k = 0; k < data1[i].cityList[j].areaList.length; k++) {
|
|
|
+ var country = {
|
|
|
+ value: data1[i].cityList[j].areaList[k].code,
|
|
|
+ label: data1[i].cityList[j].areaList[k].name,
|
|
|
+ }
|
|
|
+ this.countryArray.push(country)
|
|
|
+ }
|
|
|
+ var city = {
|
|
|
+ value: data1[i].cityList[j].code,
|
|
|
+ label: data1[i].cityList[j].name,
|
|
|
+ children: this.countryArray
|
|
|
+ }
|
|
|
+ this.cityArray.push(city)
|
|
|
+ }
|
|
|
+ var prov = {
|
|
|
+ value: data1[i].code,
|
|
|
+ label: data1[i].name,
|
|
|
+ children:this.cityArray,
|
|
|
+ }
|
|
|
+ this.provArray.push(prov)
|
|
|
+ this.options=this.provArray
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add () {
|
|
|
+ this.edit({});
|
|
|
+ },
|
|
|
+ edit (record) {
|
|
|
+ this.form.resetFields();
|
|
|
+ this.model = Object.assign({}, record);
|
|
|
+ this.visible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue(pick(this.model,'platformName','enterpriseName','provinceCode','cityCode','countryCode','provinceCityCountry','address','contactPerson','mobilePhone','phone','sysOrgCode','createTime','createBy','updateTime','updateBy','isLock'))
|
|
|
+ })
|
|
|
+ //回显省市区
|
|
|
+ this.arr=[]
|
|
|
+ this.arr.push(String(this.model.provinceCode))
|
|
|
+ this.arr.push(String(this.model.cityCode))
|
|
|
+ this.arr.push(String(this.model.countryCode))
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.$emit('close');
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ handleOk () {
|
|
|
+ const that = this;
|
|
|
+ if(this.arr.length!=3||this.arr[0]=="undefined"){
|
|
|
+ this.$message.warning("请选择所在地区");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 触发表单验证
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ that.confirmLoading = true;
|
|
|
+ let httpurl = '';
|
|
|
+ let method = '';
|
|
|
+ if(!this.model.id){
|
|
|
+ httpurl+=this.url.add;
|
|
|
+ method = 'post';
|
|
|
+ }else{
|
|
|
+ httpurl+=this.url.edit;
|
|
|
+ method = 'put';
|
|
|
+ }
|
|
|
+ let formData = Object.assign(this.model, values);
|
|
|
+ console.log("表单提交数据",formData)
|
|
|
+ httpAction(httpurl,formData,method).then((res)=>{
|
|
|
+ if(res.success){
|
|
|
+ that.$message.success(res.message);
|
|
|
+ that.$emit('ok');
|
|
|
+ }else{
|
|
|
+ that.$message.warning(res.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ that.confirmLoading = false;
|
|
|
+ that.close();
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCancel () {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ popupCallback(row){
|
|
|
+ this.form.setFieldsValue(pick(row,'platformName','enterpriseName','provinceCode','cityCode','countryCode','provinceCityCountry','address','contactPerson','mobilePhone','phone','sysOrgCode','createTime','createBy','updateTime','updateBy','isLock'))
|
|
|
+ },
|
|
|
+
|
|
|
+ //校验平台名称重复
|
|
|
+ validateCompanyAbbreviation(rule, value, callback) {
|
|
|
+ var params = {
|
|
|
+ tableName: 'hlg_platform',
|
|
|
+ fieldName: 'platform_name',
|
|
|
+ fieldVal: value,
|
|
|
+ dataId: this.model.id
|
|
|
+ }
|
|
|
+ duplicateCheck(params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('平台名称已存在!')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //校验手机号
|
|
|
+ validatePhone(rule, value, callback) {
|
|
|
+ if (!value) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback('请输入正确格式的手机号码!')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //省市区改变
|
|
|
+ onChange(value,label) {
|
|
|
+ this.arr=value
|
|
|
+ this.model.provinceCode=value[0];
|
|
|
+ this.model.cityCode=value[1];
|
|
|
+ this.model.countryCode=value[2];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form.setFieldsValue({ provinceCode: this.model.provinceCode })
|
|
|
+ this.form.setFieldsValue({ cityCode: this.model.cityCode })
|
|
|
+ this.form.setFieldsValue({ countryCode: this.model.countryCode })
|
|
|
+ if(label.length==3){
|
|
|
+ this.model.provinceCityCountry=label[0].label+"-"+label[1].label+"-"+label[2].label
|
|
|
+ this.form.setFieldsValue({ provinceCityCountry: this.model.provinceCityCountry })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .drawer-bootom-button {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -8px;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px solid #e8e8e8;
|
|
|
+ padding: 10px 16px;
|
|
|
+ text-align: right;
|
|
|
+ left: 0;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 0 0 2px 2px;
|
|
|
+ }
|
|
|
+ .avatar-uploader > .ant-upload {
|
|
|
+ width: 104px;
|
|
|
+ height: 104px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-upload-select-picture-card i {
|
|
|
+ font-size: 49px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-upload-select-picture-card .ant-upload-text {
|
|
|
+ margin-top: 8px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+</style>
|
ZhangWenQiang