123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 |
- <template>
- <div>
- <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="900">
- <a-form :form="form" ref="form" @submit="handleSubmit">
- <a-row :gutter="24">
- <a-col :span="12">
- <!-- 企业名称 -->
- <a-form-item label="企业名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-input
- allowClear
- :maxLength="30"
- v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入企业名称!' }] }]"
- placeholder="请输入企业名称(最多30个字符)"
- />
- </a-form-item>
- </a-col>
- <a-col :span="12">
- <!-- 企业编码 -->
- <a-form-item label="企业编码:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-input allowClear :maxLength="30" v-decorator="['formData.bizCode', { initialValue: formData.bizCode,getValueFromEvent: $filterEmpty }]" placeholder="请输入企业编码" />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :span="12">
- <!-- 负责人名称 -->
- <a-form-item label="负责人名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-input allowClear :maxLength="30" v-decorator="['formData.contactName', { initialValue: formData.contactName,getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入负责人名称(最多30个字符)" />
- </a-form-item>
- </a-col>
- <a-col :span="12">
- <!-- 负责人手机 -->
- <a-form-item label="负责人手机:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-input
- allowClear
- :maxLength="11"
- v-decorator="[
- 'formData.contactPhone',
- { initialValue: formData.contactPhone, rules: [{ required: true, message: '请输入负责人手机号!' }, { pattern: /^\d{11}$/, message: '请输入正确的负责人手机号' }] }
- ]"
- placeholder="请输入负责人手机"
- />
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :span="12">
- <!-- 使用有效期至 -->
- <a-form-item label="使用有效期至:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-date-picker
- style="width: 100%;"
- :disabled-date="disabledDate"
- @change="expireDateChange"
- placeholder="年/月/日"
- v-decorator="['formData.expireDate', { initialValue: formData.expireDate, rules: [{ type: 'object', required: true, message: '请选择使用有效期!' }] }]"
- />
- <p>
- 常选:
- <span class="time-text" @click="timeFilter(3)">3天</span>
- <span class="time-text" @click="timeFilter(30)">1个月</span>
- <span class="time-text" @click="timeFilter(365)">1年</span>
- </p>
- </a-form-item>
- </a-col>
- <a-col :span="12">
- <!-- 启用状态 -->
- <a-form-item label="启用状态:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-radio-group @change="onStatusChange" v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择启用状态!' }] }]">
- <a-radio :value="1">是</a-radio>
- <a-radio :value="0">否</a-radio>
- </a-radio-group>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :span="12">
- <!-- 使用权限 -->
- <a-form-item label="使用权限:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <v-select
- ref="orgType"
- allowClear
- @change="scopeTypeChange"
- v-decorator="['formData.scopeType', { initialValue: formData.scopeType, rules: [{ required: true, message: '请选择使用权限!' }] }]"
- code="STORE_AUTH_TYPE"
- ></v-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <!-- 地址 -->
- <a-col span="9">
- <a-form-item label="地址:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
- <a-select @change="getCityList" v-decorator="['formData.addrProvince', { initialValue: formData.addrProvince, rules: [] }]" placeholder="请选择省">
- <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col span="7">
- <a-form-item prop="addrCity">
- <a-select v-decorator="['formData.addrCity', { initialValue: formData.addrCity, rules: [] }]" @change="getAreaList" placeholder="请选择市">
- <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- <a-col span="7">
- <a-form-item prop="addrDistrict">
- <a-select v-decorator="['formData.addrDistrict', { initialValue: formData.addrDistrict, rules: [] }]" @change="areaCharged" placeholder="请选择区/县">
- <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
- </a-select>
- </a-form-item>
- </a-col>
- </a-row>
- <a-row :gutter="24">
- <a-col :span="17">
- <!-- 详细地址 -->
- <a-form-item label="详细地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
- <a-input :maxLength="30" allowClear placeholder="请输入详细地址(最多30个字符)" v-decorator="['formData.addrDetail', { initialValue: formData.addrDetail,getValueFromEvent: $filterEmpty, rules: [] }]" />
- </a-form-item>
- </a-col>
- </a-row>
- <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
- <a-button type="primary" @click="handleSubmit()">保存</a-button>
- <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">取消</a-button>
- </a-form-item>
- </a-form>
- </a-modal>
- </div>
- </template>
- <script>
- import { STable, VSelect } from '@/components';
- import { getProvince, getCityByPro, getDistrictByCity, tenantsDetail, tenantsSave } from '@/api/tenants.js';
- import moment from 'moment';
- export default {
- name: 'TenantsModal',
- components: {
- STable,
- VSelect
- },
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- // 要编辑的租户id
- itemId: {
- type: [String, Number],
- default: ''
- }
- },
- watch: {
- visible(newValue, oldValue) {
- this.isshow = newValue;
- },
- isshow(newValue, oldValue) {
- if (newValue) {
- if (this.itemId) {
- this.getDetail(this.itemId);
- }
- } else {
- this.cancel();
- }
- }
- },
- data() {
- return {
- moment,
- isshow: this.visible,
- form: this.$form.createForm(this, {
- name: 'tenantsModal'
- }),
- addrProvinceList: [], // 省列表
- addrCityList: [], // 市列表
- addrDistrictList: [], // 区列表
- formData: {
- name: '', // 企业名称
- bizCode: '', // 企业编码
- contactName: '', // 负责人名称
- contactPhone: '', // 负责人电话
- expireDate: null, // 使用有效期
- scopeType: '', // 权限类型
- status: 1, // 启用状态
- addrProvince: undefined,
- addrCity: undefined,
- addrDistrict: undefined,
- addrDetail: '' // 详细地址
- }
- };
- },
- computed: {
- titleText() {
- return this.itemId ? '编辑' : '新增';
- }
- },
- mounted() {
- this.getProvinceList();
- },
- methods: {
- cancel(e) {
- this.clear();
- this.$emit('close');
- },
- // 不可选日期 今天以前日期不可选
- disabledDate(current) {
- return current && current.valueOf() < Date.now() - 86400000;
- },
- pageInit() {
- this.formData = {
- name: '', // 企业名称
- bizCode: '', // 企业编码
- contactName: '', // 负责人名称
- contactPhone: '', // 负责人电话
- expireDate: null, // 使用有效期
- scopeType: '', // 权限类型
- status: 1, // 启用状态
- addrProvince: undefined,
- addrCity: undefined,
- addrDistrict: undefined,
- addrDetail: '' // 详细地址
- };
- },
- // 查详情
- getDetail(id) {
- tenantsDetail({ id: id }).then(res => {
- // console.log(res, 'rrrrrrr')
- if (res.status == 200) {
- this.formData = Object.assign(this.formData, res.data);
- const now = moment().add(7, 'day').format('YYYY-MM-DD');
- const expireDate = moment(now, 'YYYY-MM-DD');
- this.formData.expireDate = this.formData.expireDate ? moment(this.formData.expireDate, 'YYYY-MM-DD') : expireDate;
- this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } });
- this.formData.status = Number(this.formData.status);
- console.log(this.formData, 'this.formData');
- }
- });
- },
- // 获取省列表'
- getProvinceList() {
- getProvince().then(res => {
- // console.log(res, 'rrrrrrr')
- if (res.status == 200) {
- this.addrProvinceList = res.data || [];
- } else {
- this.addrProvinceList = [];
- }
- });
- },
- // 获取城市列表
- getCityList(val) {
- this.addrCityList = [];
- this.addrDistrictList = [];
- this.form.setFields({ 'formData.addrCity': { value: undefined, errors: '' } });
- this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
- this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
- this.getCityListRequest(val);
- },
- getCityListRequest(val) {
- getCityByPro({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrCityList = res.data || [];
- } else {
- this.addrCityList = [];
- }
- });
- },
- // 获取区县列表
- getAreaList(val) {
- this.addrDistrictList = [];
- this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
- this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
- this.getAreaListRequest(val);
- },
- getAreaListRequest(val) {
- getDistrictByCity({
- id: val
- }).then(res => {
- if (res.status == 200) {
- this.addrDistrictList = res.data || [];
- } else {
- this.addrDistrictList = [];
- }
- });
- },
- // 区县变更
- areaCharged(val) {
- this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
- },
- // 有效期改变
- expireDateChange(v) {
- console.log(v);
- this.form.setFields({
- 'formData.expireDate': {
- value: v,
- errors: ''
- }
- });
- },
- // 使用权限改变
- scopeTypeChange(v) {
- this.form.setFields({ 'formData.scopeType': { value: v, errors: '' } });
- },
- // 启用状态切换
- onStatusChange(v) {
- console.log(v, 'vvvvvvvvvv');
- this.formData.status = v;
- },
- // 快捷时间处理
- timeFilter(time) {
- const now = moment()
- .add(time, 'day')
- .format('YYYY-MM-DD');
- this.form.setFields({
- 'formData.expireDate': {
- value: moment(now, 'YYYY-MM-DD'),
- errors: ''
- }
- });
- },
- // 保存提交
- handleSubmit() {
- const _this = this;
- this.form.validateFields((err, values) => {
- if (!err) {
- const params = this.itemId
- ? Object.assign(
- {
- id: this.itemId
- },
- values.formData
- )
- : values.formData;
- params.expireDate = moment(params.expireDate).format('YYYY-MM-DD');
- tenantsSave(params).then(res => {
- console.log(res, 'res--save');
- if (res.status + '' === '200') {
- this.$message.success(res.message ? res.message : '保存成功');
- this.$emit('refresh');
- setTimeout(function() {
- _this.cancel();
- }, 300);
- } else {
- // this.$message.error(res.message);
- }
- });
- }
- });
- },
- // 取消
- handleCancel() {
- const _this = this;
- this.$confirm({
- title: '提示',
- content: '确定取消吗?',
- okText: '确定',
- cancelText: '取消',
- onOk() {
- _this.clear();
- _this.cancel();
- }
- });
- },
- clear() {
- this.form.resetFields();
- this.pageInit();
- }
- },
- beforeCreate() {
- this.form = this.$form.createForm(this, {
- name: 'tenantsModal'
- });
- }
- };
- </script>
- <style>
- .modalBox {
- }
- .ant-modal-footer {
- display: none;
- }
- .time-text {
- color: #1890ff;
- padding: 0px 20px;
- cursor: pointer;
- }
- .labelT {
- position: absolute;
- left: -135px;
- top: 20px;
- color: rgba(0, 0, 0, 0.85);
- }
- </style>
|