tenantsModal.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <template>
  2. <div>
  3. <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="900">
  4. <a-form :form="form" ref="form" @submit="handleSubmit">
  5. <a-row :gutter="24">
  6. <a-col :span="12">
  7. <!-- 企业名称 -->
  8. <a-form-item label="企业名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  9. <a-input
  10. allowClear
  11. :maxLength="30"
  12. v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入企业名称!' }] }]"
  13. placeholder="请输入企业名称(最多30个字符)"
  14. />
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="12">
  18. <!-- 企业编码 -->
  19. <a-form-item label="企业编码:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  20. <a-input allowClear :maxLength="30" v-decorator="['formData.bizCode', { initialValue: formData.bizCode,getValueFromEvent: $filterEmpty }]" placeholder="请输入企业编码" />
  21. </a-form-item>
  22. </a-col>
  23. </a-row>
  24. <a-row :gutter="24">
  25. <a-col :span="12">
  26. <!-- 负责人名称 -->
  27. <a-form-item label="负责人名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  28. <a-input allowClear :maxLength="30" v-decorator="['formData.contactName', { initialValue: formData.contactName,getValueFromEvent: $filterEmpty, rules: [] }]" placeholder="请输入负责人名称(最多30个字符)" />
  29. </a-form-item>
  30. </a-col>
  31. <a-col :span="12">
  32. <!-- 负责人手机 -->
  33. <a-form-item label="负责人手机:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  34. <a-input
  35. allowClear
  36. :maxLength="11"
  37. v-decorator="[
  38. 'formData.contactPhone',
  39. { initialValue: formData.contactPhone, rules: [{ required: true, message: '请输入负责人手机号!' }, { pattern: /^\d{11}$/, message: '请输入正确的负责人手机号' }] }
  40. ]"
  41. placeholder="请输入负责人手机"
  42. />
  43. </a-form-item>
  44. </a-col>
  45. </a-row>
  46. <a-row :gutter="24">
  47. <a-col :span="12">
  48. <!-- 使用有效期至 -->
  49. <a-form-item label="使用有效期至:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  50. <a-date-picker
  51. style="width: 100%;"
  52. :disabled-date="disabledDate"
  53. @change="expireDateChange"
  54. placeholder="年/月/日"
  55. v-decorator="['formData.expireDate', { initialValue: formData.expireDate, rules: [{ type: 'object', required: true, message: '请选择使用有效期!' }] }]"
  56. />
  57. <p>
  58. 常选:
  59. <span class="time-text" @click="timeFilter(3)">3天</span>
  60. <span class="time-text" @click="timeFilter(30)">1个月</span>
  61. <span class="time-text" @click="timeFilter(365)">1年</span>
  62. </p>
  63. </a-form-item>
  64. </a-col>
  65. <a-col :span="12">
  66. <!-- 启用状态 -->
  67. <a-form-item label="启用状态:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  68. <a-radio-group @change="onStatusChange" v-decorator="['formData.status', { initialValue: formData.status, rules: [{ required: true, message: '请选择启用状态!' }] }]">
  69. <a-radio :value="1">是</a-radio>
  70. <a-radio :value="0">否</a-radio>
  71. </a-radio-group>
  72. </a-form-item>
  73. </a-col>
  74. </a-row>
  75. <a-row :gutter="24">
  76. <a-col :span="12">
  77. <!-- 使用权限 -->
  78. <a-form-item label="使用权限:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  79. <v-select
  80. ref="orgType"
  81. allowClear
  82. @change="scopeTypeChange"
  83. v-decorator="['formData.scopeType', { initialValue: formData.scopeType, rules: [{ required: true, message: '请选择使用权限!' }] }]"
  84. code="STORE_AUTH_TYPE"
  85. ></v-select>
  86. </a-form-item>
  87. </a-col>
  88. </a-row>
  89. <a-row :gutter="24">
  90. <!-- 地址 -->
  91. <a-col span="9">
  92. <a-form-item label="地址:" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
  93. <a-select @change="getCityList" v-decorator="['formData.addrProvince', { initialValue: formData.addrProvince, rules: [] }]" placeholder="请选择省">
  94. <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
  95. </a-select>
  96. </a-form-item>
  97. </a-col>
  98. <a-col span="7">
  99. <a-form-item prop="addrCity">
  100. <a-select v-decorator="['formData.addrCity', { initialValue: formData.addrCity, rules: [] }]" @change="getAreaList" placeholder="请选择市">
  101. <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
  102. </a-select>
  103. </a-form-item>
  104. </a-col>
  105. <a-col span="7">
  106. <a-form-item prop="addrDistrict">
  107. <a-select v-decorator="['formData.addrDistrict', { initialValue: formData.addrDistrict, rules: [] }]" @change="areaCharged" placeholder="请选择区/县">
  108. <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
  109. </a-select>
  110. </a-form-item>
  111. </a-col>
  112. </a-row>
  113. <a-row :gutter="24">
  114. <a-col :span="17">
  115. <!-- 详细地址 -->
  116. <a-form-item label="详细地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
  117. <a-input :maxLength="30" allowClear placeholder="请输入详细地址(最多30个字符)" v-decorator="['formData.addrDetail', { initialValue: formData.addrDetail,getValueFromEvent: $filterEmpty, rules: [] }]" />
  118. </a-form-item>
  119. </a-col>
  120. </a-row>
  121. <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
  122. <a-button type="primary" @click="handleSubmit()">保存</a-button>
  123. <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">取消</a-button>
  124. </a-form-item>
  125. </a-form>
  126. </a-modal>
  127. </div>
  128. </template>
  129. <script>
  130. import { STable, VSelect } from '@/components';
  131. import { getProvince, getCityByPro, getDistrictByCity, tenantsDetail, tenantsSave } from '@/api/tenants.js';
  132. import moment from 'moment';
  133. export default {
  134. name: 'TenantsModal',
  135. components: {
  136. STable,
  137. VSelect
  138. },
  139. props: {
  140. visible: {
  141. type: Boolean,
  142. default: false
  143. },
  144. // 要编辑的租户id
  145. itemId: {
  146. type: [String, Number],
  147. default: ''
  148. }
  149. },
  150. watch: {
  151. visible(newValue, oldValue) {
  152. this.isshow = newValue;
  153. },
  154. isshow(newValue, oldValue) {
  155. if (newValue) {
  156. if (this.itemId) {
  157. this.getDetail(this.itemId);
  158. }
  159. } else {
  160. this.cancel();
  161. }
  162. }
  163. },
  164. data() {
  165. return {
  166. moment,
  167. isshow: this.visible,
  168. form: this.$form.createForm(this, {
  169. name: 'tenantsModal'
  170. }),
  171. addrProvinceList: [], // 省列表
  172. addrCityList: [], // 市列表
  173. addrDistrictList: [], // 区列表
  174. formData: {
  175. name: '', // 企业名称
  176. bizCode: '', // 企业编码
  177. contactName: '', // 负责人名称
  178. contactPhone: '', // 负责人电话
  179. expireDate: null, // 使用有效期
  180. scopeType: '', // 权限类型
  181. status: 1, // 启用状态
  182. addrProvince: undefined,
  183. addrCity: undefined,
  184. addrDistrict: undefined,
  185. addrDetail: '' // 详细地址
  186. }
  187. };
  188. },
  189. computed: {
  190. titleText() {
  191. return this.itemId ? '编辑' : '新增';
  192. }
  193. },
  194. mounted() {
  195. this.getProvinceList();
  196. },
  197. methods: {
  198. cancel(e) {
  199. this.clear();
  200. this.$emit('close');
  201. },
  202. // 不可选日期 今天以前日期不可选
  203. disabledDate(current) {
  204. return current && current.valueOf() < Date.now() - 86400000;
  205. },
  206. pageInit() {
  207. this.formData = {
  208. name: '', // 企业名称
  209. bizCode: '', // 企业编码
  210. contactName: '', // 负责人名称
  211. contactPhone: '', // 负责人电话
  212. expireDate: null, // 使用有效期
  213. scopeType: '', // 权限类型
  214. status: 1, // 启用状态
  215. addrProvince: undefined,
  216. addrCity: undefined,
  217. addrDistrict: undefined,
  218. addrDetail: '' // 详细地址
  219. };
  220. },
  221. // 查详情
  222. getDetail(id) {
  223. tenantsDetail({ id: id }).then(res => {
  224. // console.log(res, 'rrrrrrr')
  225. if (res.status == 200) {
  226. this.formData = Object.assign(this.formData, res.data);
  227. const now = moment().add(7, 'day').format('YYYY-MM-DD');
  228. const expireDate = moment(now, 'YYYY-MM-DD');
  229. this.formData.expireDate = this.formData.expireDate ? moment(this.formData.expireDate, 'YYYY-MM-DD') : expireDate;
  230. this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } });
  231. this.formData.status = Number(this.formData.status);
  232. console.log(this.formData, 'this.formData');
  233. }
  234. });
  235. },
  236. // 获取省列表'
  237. getProvinceList() {
  238. getProvince().then(res => {
  239. // console.log(res, 'rrrrrrr')
  240. if (res.status == 200) {
  241. this.addrProvinceList = res.data || [];
  242. } else {
  243. this.addrProvinceList = [];
  244. }
  245. });
  246. },
  247. // 获取城市列表
  248. getCityList(val) {
  249. this.addrCityList = [];
  250. this.addrDistrictList = [];
  251. this.form.setFields({ 'formData.addrCity': { value: undefined, errors: '' } });
  252. this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
  253. this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
  254. this.getCityListRequest(val);
  255. },
  256. getCityListRequest(val) {
  257. getCityByPro({
  258. id: val
  259. }).then(res => {
  260. if (res.status == 200) {
  261. this.addrCityList = res.data || [];
  262. } else {
  263. this.addrCityList = [];
  264. }
  265. });
  266. },
  267. // 获取区县列表
  268. getAreaList(val) {
  269. this.addrDistrictList = [];
  270. this.form.setFields({ 'formData.addrDistrict': { value: undefined, errors: '' } });
  271. this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
  272. this.getAreaListRequest(val);
  273. },
  274. getAreaListRequest(val) {
  275. getDistrictByCity({
  276. id: val
  277. }).then(res => {
  278. if (res.status == 200) {
  279. this.addrDistrictList = res.data || [];
  280. } else {
  281. this.addrDistrictList = [];
  282. }
  283. });
  284. },
  285. // 区县变更
  286. areaCharged(val) {
  287. this.form.setFields({ 'formData.addrDetail': { value: undefined, errors: '' } });
  288. },
  289. // 有效期改变
  290. expireDateChange(v) {
  291. console.log(v);
  292. this.form.setFields({
  293. 'formData.expireDate': {
  294. value: v,
  295. errors: ''
  296. }
  297. });
  298. },
  299. // 使用权限改变
  300. scopeTypeChange(v) {
  301. this.form.setFields({ 'formData.scopeType': { value: v, errors: '' } });
  302. },
  303. // 启用状态切换
  304. onStatusChange(v) {
  305. console.log(v, 'vvvvvvvvvv');
  306. this.formData.status = v;
  307. },
  308. // 快捷时间处理
  309. timeFilter(time) {
  310. const now = moment()
  311. .add(time, 'day')
  312. .format('YYYY-MM-DD');
  313. this.form.setFields({
  314. 'formData.expireDate': {
  315. value: moment(now, 'YYYY-MM-DD'),
  316. errors: ''
  317. }
  318. });
  319. },
  320. // 保存提交
  321. handleSubmit() {
  322. const _this = this;
  323. this.form.validateFields((err, values) => {
  324. if (!err) {
  325. const params = this.itemId
  326. ? Object.assign(
  327. {
  328. id: this.itemId
  329. },
  330. values.formData
  331. )
  332. : values.formData;
  333. params.expireDate = moment(params.expireDate).format('YYYY-MM-DD');
  334. tenantsSave(params).then(res => {
  335. console.log(res, 'res--save');
  336. if (res.status + '' === '200') {
  337. this.$message.success(res.message ? res.message : '保存成功');
  338. this.$emit('refresh');
  339. setTimeout(function() {
  340. _this.cancel();
  341. }, 300);
  342. } else {
  343. // this.$message.error(res.message);
  344. }
  345. });
  346. }
  347. });
  348. },
  349. // 取消
  350. handleCancel() {
  351. const _this = this;
  352. this.$confirm({
  353. title: '提示',
  354. content: '确定取消吗?',
  355. okText: '确定',
  356. cancelText: '取消',
  357. onOk() {
  358. _this.clear();
  359. _this.cancel();
  360. }
  361. });
  362. },
  363. clear() {
  364. this.form.resetFields();
  365. this.pageInit();
  366. }
  367. },
  368. beforeCreate() {
  369. this.form = this.$form.createForm(this, {
  370. name: 'tenantsModal'
  371. });
  372. }
  373. };
  374. </script>
  375. <style>
  376. .modalBox {
  377. }
  378. .ant-modal-footer {
  379. display: none;
  380. }
  381. .time-text {
  382. color: #1890ff;
  383. padding: 0px 20px;
  384. cursor: pointer;
  385. }
  386. .labelT {
  387. position: absolute;
  388. left: -135px;
  389. top: 20px;
  390. color: rgba(0, 0, 0, 0.85);
  391. }
  392. </style>