editModal.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <a-modal
  3. centered
  4. class="supplierInfoEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTitle"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 表单 -->
  13. <div v-if="!isView">
  14. <a-form-model
  15. id="supplierInfoEdit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="姓名" prop="name">
  23. <a-input
  24. id="supplierInfoEdit-name"
  25. :maxLength="10"
  26. v-model.trim="form.name"
  27. @change="filterEmpty"
  28. placeholder="请输入姓名(最多10个字符)"
  29. allowClear />
  30. </a-form-model-item>
  31. <a-form-model-item label="身份证号">
  32. <a-input
  33. id="supplierInfoEdit-idCard"
  34. :maxLength="18"
  35. v-model.trim="form.idCard"
  36. placeholder="请输入身份证号"
  37. allowClear />
  38. </a-form-model-item>
  39. <a-form-model-item label="手机号码" prop="mobile">
  40. <a-input
  41. id="supplierInfoEdit-mobile"
  42. :maxLength="11"
  43. v-model.trim="form.mobile"
  44. placeholder="请输入手机号码(最多11个字符)"
  45. allowClear />
  46. </a-form-model-item>
  47. <a-form-model-item label="入职时间" prop="entryDate">
  48. <a-date-picker
  49. v-model="form.entryDate"
  50. type="date"
  51. :disabled-date="disabledDate"
  52. :defaultValue="null"
  53. placeholder="请选择入职时间"
  54. style="width: 100%;"
  55. />
  56. </a-form-model-item>
  57. <a-form-model-item label="性别" prop="sex">
  58. <a-radio-group
  59. name="radioGroup"
  60. v-model="form.sex"
  61. id="supplierInfoEdit-enabledFlag" >
  62. <a-radio :value="1">男</a-radio>
  63. <a-radio :value="0">女</a-radio>
  64. </a-radio-group>
  65. </a-form-model-item>
  66. <a-form-model-item label="状态" prop="enableFlag">
  67. <a-radio-group
  68. name="radioGroup"
  69. v-model="form.enableFlag"
  70. id="enableFlag" >
  71. <a-radio :value="1">启用</a-radio>
  72. <a-radio :value="0">禁用</a-radio>
  73. </a-radio-group>
  74. </a-form-model-item>
  75. </a-form-model>
  76. <div class="btn-cont">
  77. <a-button type="primary" id="supplierInfoEdit-btn-submit" @click="handleSubmit">保存</a-button>
  78. <a-button id="supplierInfoEdit-btn-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  79. </div>
  80. </div>
  81. <!-- 详情 -->
  82. <a-descriptions size="small" :column="2" v-if="isView">
  83. <a-descriptions-item label="姓名">{{ this.form.name || '--' }}</a-descriptions-item>
  84. <a-descriptions-item label="身份证号">{{ this.form.idCard || '--' }}</a-descriptions-item>
  85. <a-descriptions-item label="联系电话">{{ this.form.mobile || '--' || '--' }}</a-descriptions-item>
  86. <a-descriptions-item label="入职时间">{{ this.form.entryDate || '--' || '--' }}</a-descriptions-item>
  87. <a-descriptions-item label="性别">{{ this.form.sexDictValue || '--' || '--' }}</a-descriptions-item>
  88. <a-descriptions-item label="状态">{{ this.form.enableFlagDictValue || '--' || '--' }}</a-descriptions-item>
  89. </a-descriptions>
  90. </a-spin>
  91. </a-modal>
  92. </template>
  93. <script>
  94. import { commonMixin } from '@/utils/mixin'
  95. import { employeeSave, employeeDetail } from '@/api/salesman'
  96. import moment from 'moment'
  97. export default {
  98. name: 'SupplierInfoEditModal',
  99. mixins: [commonMixin],
  100. props: {
  101. openModal: { // 弹框显示状态
  102. type: Boolean,
  103. default: false
  104. },
  105. itemId: {
  106. type: [Number, String],
  107. default: ''
  108. },
  109. modalTitle: {
  110. type: String,
  111. default: ''
  112. },
  113. isState: { // 是否显示状态
  114. type: Boolean,
  115. default: true
  116. }
  117. },
  118. data () {
  119. return {
  120. spinning: false,
  121. isShow: this.openModal, // 是否打开弹框
  122. formItemLayout: {
  123. labelCol: { span: 6 },
  124. wrapperCol: { span: 16 }
  125. },
  126. isView: false, // 是否查看详情
  127. form: {
  128. name: '', // 姓名
  129. mobile: '', // 联系电话
  130. enableFlag: 1, // 启禁用
  131. sex: 1, // 性别
  132. idCard: '', // 身份证号
  133. entryDate: undefined // 入职时间
  134. },
  135. rules: {
  136. name: [
  137. { required: true, message: '请输入姓名', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' }
  138. ],
  139. mobile: [
  140. { required: true, message: '请输入手机号码', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号码!' }
  141. ],
  142. entryDate: [
  143. { required: true, message: '请选择入职时间', trigger: 'change' }
  144. ],
  145. sex: [
  146. { required: true, message: '请选择性别', trigger: 'change' }
  147. ],
  148. enableFlag: [
  149. { required: true, message: '请选择状态', trigger: 'change' }
  150. ]
  151. }
  152. }
  153. },
  154. methods: {
  155. // 时间 change
  156. dateChange (date) {
  157. this.queryParam.beginDate = date[0]
  158. this.queryParam.endDate = date[1]
  159. },
  160. // 不可选日期
  161. disabledDate (current) {
  162. return current && current > moment().endOf('day')
  163. },
  164. filterEmpty () {
  165. let str = this.form.supplierName
  166. str = str.replace(/\ +/g, '')
  167. str = str.replace(/[ ]/g, '')
  168. str = str.replace(/[\r\n]/g, '')
  169. this.form.supplierName = str
  170. },
  171. // 详情
  172. getDetail () {
  173. employeeDetail({ id: this.itemId }).then(res => {
  174. if (res.status == 200) {
  175. this.form = Object.assign(this.form, res.data)
  176. this.form.sex = Number(this.form.sex)
  177. this.form.enableFlag = Number(this.form.enableFlag)
  178. }
  179. })
  180. },
  181. // 保存
  182. handleSubmit (e) {
  183. e.preventDefault()
  184. const _this = this
  185. this.$refs.ruleForm.validate(valid => {
  186. if (valid) {
  187. const form = _this.form
  188. form.entryDate = moment(form.entryDate).format('YYYY-MM-DD')
  189. form.id = this.itemId ? this.itemId : null
  190. _this.spinning = true
  191. employeeSave(form).then(res => {
  192. if (res.status == 200) {
  193. _this.$message.success(res.message)
  194. _this.$emit('ok')
  195. _this.isShow = false
  196. _this.spinning = false
  197. } else {
  198. _this.spinning = false
  199. }
  200. })
  201. } else {
  202. console.log('error submit!!')
  203. return false
  204. }
  205. })
  206. },
  207. cancel () {
  208. this.form = {
  209. name: '', // 姓名
  210. mobile: '', // 联系电话
  211. enableFlag: 1, // 启禁用
  212. sex: 1, // 性别
  213. idCard: '', // 身份证号
  214. entryDate: undefined // 入职时间
  215. }
  216. // this.$nextTick(() => {
  217. // this.$refs.ruleForm.resetFields()
  218. // })
  219. }
  220. },
  221. watch: {
  222. // 父页面传过来的弹框状态
  223. openModal (newValue, oldValue) {
  224. this.isShow = newValue
  225. this.cancel()
  226. },
  227. // 重定义的弹框状态
  228. isShow (newValue, oldValue) {
  229. if (!newValue) {
  230. this.$emit('close')
  231. }
  232. },
  233. itemId (newValue, oldValue) {
  234. if (this.isShow && newValue) {
  235. this.getDetail()
  236. }
  237. },
  238. modalTitle (newValue, oldValue) {
  239. console.log(newValue)
  240. if (newValue) {
  241. if (newValue == '编辑' || newValue == '新增') {
  242. this.isView = false
  243. } else {
  244. this.isView = true
  245. }
  246. }
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="less">
  252. .supplierInfoEdit-modal{
  253. .ant-modal-body {
  254. padding: 40px 40px 24px;
  255. }
  256. .btn-cont {
  257. text-align: center;
  258. margin: 35px 0 10px;
  259. }
  260. }
  261. </style>