customer-add-or-update.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <!-- <el-dialog
  3. :title="!id ? '新增' : display ? '详情' : '编辑'"
  4. :close-on-click-modal="false"
  5. :visible.sync="visible"> -->
  6. <div>
  7. <div class="my-title">{{ !id ? '新增' : display ? '详情' : '编辑' }}</div>
  8. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
  9. <h4>基础信息</h4>
  10. <el-form-item label="客户名称" prop="customerName">
  11. <el-input v-model="dataForm.customerName" :disabled="display" placeholder="客户名称"></el-input>
  12. </el-form-item>
  13. <el-form-item label="客户类型" prop="customerType">
  14. <el-select
  15. v-model="dataForm.customerType"
  16. :disabled="display"
  17. placeholder="请选择">
  18. <el-option v-for="item in optionsCT"
  19. :key="item.value"
  20. :label="item.label"
  21. :value="item.value">
  22. </el-option>
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item label="客户级别" prop="level">
  26. <el-select
  27. v-model="dataForm.level"
  28. :disabled="display"
  29. remote
  30. placeholder="请选择">
  31. <el-option
  32. v-for="item in options"
  33. :key="item.code"
  34. :label="item.value"
  35. :value="item.code">
  36. </el-option>
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item label="详细地址" prop="address">
  40. <el-input v-model="dataForm.address" :disabled="display" placeholder="详细地址"></el-input>
  41. </el-form-item>
  42. <el-form-item label="电话" prop="tel">
  43. <el-input v-model="dataForm.tel" :disabled="display" placeholder="电话"></el-input>
  44. </el-form-item>
  45. <el-form-item label="邮编">
  46. <el-input v-model="dataForm.zipCode" :disabled="display" placeholder="邮编"></el-input>
  47. </el-form-item>
  48. <el-form-item label="传真">
  49. <el-input v-model="dataForm.fax" :disabled="display" placeholder="传真"></el-input>
  50. </el-form-item>
  51. <el-form-item label="网址">
  52. <el-input v-model="dataForm.url" :disabled="display" placeholder="网址"></el-input>
  53. </el-form-item>
  54. <el-form-item label="公司简介">
  55. <el-input v-model="dataForm.introduction" :disabled="display" type="textarea" placeholder="公司简介"></el-input>
  56. </el-form-item>
  57. <h4>业务联系人</h4>
  58. <el-form-item label="联系人" prop="contact">
  59. <el-input v-model="dataForm.contact" :disabled="display" placeholder="联系人"></el-input>
  60. </el-form-item>
  61. <el-form-item label="手机号码" prop="contactTel">
  62. <el-input v-model="dataForm.contactTel" :disabled="display" placeholder="手机号码"></el-input>
  63. </el-form-item>
  64. <el-form-item label="职位">
  65. <el-input v-model="dataForm.contactPosition" :disabled="display" placeholder="职位"></el-input>
  66. </el-form-item>
  67. <el-form-item label="邮箱">
  68. <el-input v-model="dataForm.contactEmail" :disabled="display" placeholder="邮箱"></el-input>
  69. </el-form-item>
  70. <el-form-item label="对接业务员" prop="bizManager">
  71. <user-component v-model="dataForm.bizManager" :disabled="display" :user-id.sync="dataForm.bizManager" @userSelected="change"/>
  72. <!-- <el-input v-model="dataForm.bizManager" placeholder="对接业务员"></el-input> -->
  73. </el-form-item>
  74. <h4>财务信息</h4>
  75. <el-form-item label="企业税号" prop="taxNumber">
  76. <el-input v-model="dataForm.taxNumber" :disabled="display" placeholder="企业税号"></el-input>
  77. </el-form-item>
  78. <el-form-item label="发票抬头" prop="invoiceTitle">
  79. <el-input v-model="dataForm.invoiceTitle" :disabled="display" placeholder="发票抬头"></el-input>
  80. </el-form-item>
  81. <el-form-item label="开户银行" prop="bank">
  82. <el-input v-model="dataForm.bank" :disabled="display" placeholder="开户银行"></el-input>
  83. </el-form-item>
  84. <el-form-item label="银行账号" prop="account">
  85. <el-input v-model="dataForm.account" :disabled="display" placeholder="银行账号"></el-input>
  86. </el-form-item>
  87. <el-form-item label="单位地址" prop="billingAddr">
  88. <el-input v-model="dataForm.billingAddr" :disabled="display" placeholder="单位地址"></el-input>
  89. </el-form-item>
  90. </el-form>
  91. <span slot="footer" class="dialog-footer">
  92. <el-button @click="onChose">取消</el-button>
  93. <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
  94. </span>
  95. </div>
  96. <!-- </el-dialog> -->
  97. </template>
  98. <script>
  99. import UserComponent from '../common/user-component'
  100. import { getLevel } from '@/api/cus'
  101. import { isMobile } from '@/utils/validate'
  102. export default {
  103. components: { UserComponent },
  104. computed: {
  105. orgId: {
  106. get () { return this.$store.state.user.orgId }
  107. }
  108. },
  109. data () {
  110. let validateMobile = (rule, value, callback) => {
  111. if (!isMobile(value)) {
  112. callback(new Error('手机号格式错误'))
  113. } else {
  114. callback()
  115. }
  116. }
  117. return {
  118. visible: false,
  119. options: [],
  120. // 客户类型
  121. optionsCT: [
  122. {
  123. value: '0',
  124. label: '公司'
  125. },
  126. {
  127. value: '1',
  128. label: '个人'
  129. }
  130. ],
  131. id: 0,
  132. display: false,
  133. dataForm: {},
  134. dataRule: {
  135. customerName: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
  136. customerType: [{required: true, message: '客户类型不能为空', trigger: 'blur'}],
  137. level: [{ required: true, message: '客户级别不能为空', trigger: 'blur' }],
  138. address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
  139. tel: [
  140. { required: true, message: '电话不能为空', trigger: 'blur' },
  141. { validator: validateMobile, trigger: 'blur' }
  142. ],
  143. contact: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  144. contactTel: [
  145. { required: true, message: '手机号码不能为空', trigger: 'blur' },
  146. { validator: validateMobile, trigger: 'blur' }
  147. ],
  148. bizManager: [{ required: true, message: '对接业务员不能为空', trigger: 'blur' }],
  149. taxNumber: [{ required: true, message: '企业税号不能为空', trigger: 'blur' }],
  150. invoiceTitle: [{ required: true, message: '发票抬头不能为空', trigger: 'blur' }],
  151. bank: [{ required: true, message: '开户银行不能为空', trigger: 'blur' }],
  152. account: [{ required: true, message: '银行账号不能为空', trigger: 'blur' }],
  153. billingAddr: [{ required: true, message: '单位地址不能为空', trigger: 'blur' }]
  154. }
  155. }
  156. },
  157. methods: {
  158. onChose () {
  159. this.$emit('onChose')
  160. },
  161. async init (id, disabled) {
  162. this.dataForm = {}
  163. this.display = disabled
  164. this.id = id || 0
  165. this.visible = true
  166. await getLevel().then(({data}) => {
  167. if (data && data.code === '200') {
  168. this.options = data.data
  169. }
  170. })
  171. if (this.id) {
  172. this.$http({
  173. url: this.$http.adornUrl(`/biz-service/cusCustomer/info/${this.id}`),
  174. method: 'get',
  175. params: this.$http.adornParams()
  176. }).then(({data}) => {
  177. if (data && data.code === '200') {
  178. this.dataForm = data.data
  179. }
  180. })
  181. }
  182. },
  183. change (item) {
  184. this.dataForm.bizManager = item.value
  185. this.dataForm.bizManagerName = item.name
  186. },
  187. // 表单提交
  188. dataFormSubmit () {
  189. this.$refs['dataForm'].validate((valid) => {
  190. if (valid) {
  191. this.$http({
  192. url: this.$http.adornUrl(`/biz-service/cusCustomer/${!this.id ? 'save' : 'update'}`),
  193. method: 'post',
  194. data: this.$http.adornData({...this.dataForm, orgId: this.orgId})
  195. }).then(({data}) => {
  196. if (data && data.code === '200') {
  197. this.$message({
  198. message: '操作成功',
  199. type: 'success',
  200. duration: 1500,
  201. onClose: () => {
  202. this.onChose()
  203. this.$emit('refreshDataList')
  204. }
  205. })
  206. } else {
  207. this.$message.error(data.msg)
  208. }
  209. })
  210. }
  211. })
  212. },
  213. validateField (type) {
  214. this.$refs.dataForm.validateField(type)
  215. }
  216. }
  217. }
  218. </script>