tenantsModal.vue 13 KB

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