普通项目管理页面；选择企业组件；

2021-08-25 18:09:53 +08:00
parent a871898de6
commit 5d7ae8724d
8 changed files with 763 additions and 55 deletions
@@ -0,0 +1,243 @@
+<template>
+  <j-modal
+      :title="title"
+      :width="width"
+      :visible="visible"
+      :confirmLoading="confirmLoading"
+      switchFullscreen
+      @ok="handleOk"
+      @cancel="handleCancel"
+      cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入公司名称"
+                       v-decorator="['companyName',validatorRules.companyName]"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="公司地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入公司地址"
+                       v-decorator="['companyAddress']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="公司电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入公司电话"
+                       v-decorator="['companyPhone',validatorRules.companyPhone]"
+                       :maxLength='15'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
+              <a-input placeholder="请输入邮政编码"
+                       v-decorator="['postalCode',validatorRules.postalCode]"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+              <a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="银行户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入银行户名"
+                       v-decorator="['bankAccountName']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="开户行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入开户行"
+                       v-decorator="['openingBank']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入银行账号"
+                       v-decorator="['bankAccount']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="12" :sm="24">
+            <a-form-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input placeholder="请输入税号"
+                       v-decorator="['dutyCode']"
+                       :maxLength='50'
+                       @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col>
+            <a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
+              <a-textarea
+                  placeholder="请输入备注"
+                  v-decorator="['remarks']"
+                  :auto-size="{ minRows: 3, maxRows: 6 }"
+                  :maxLength='300'
+                  @change="e => {e.target.value = (e.target.value + '').trim()}"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { postcode, phoneReg, isPhone } from '@/utils/validate'
+import pick from 'lodash.pick'
+import { httpAction } from '@api/manage'
+
+export default {
+  name: 'BusinessMangementModule',
+  data() {
+    return {
+      title: '操作',
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 18 }
+      },
+      remarksLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      remarksWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 21 }
+      },
+      validatorRules: {
+        companyName: {
+          rules: [{ required: true, message: '请输入企业名称' }],
+          validateTrigger: 'blur'
+        },
+        companyPhone: {
+          rules: [{ validator: this.checkCompanyPhone }]
+        },
+        postalCode: {
+          rules: [{ validator: this.checkPostcode }]
+        }
+      },
+      url: {
+        add: '',
+        edit: ''
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'companyName', 'companyAddress', 'companyPhone', 'postalCode', 'bankAccountName', 'openingBank', 'bankAccount', 'dutyCode', 'remarks'))
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          const formData = Object.assign(this.model, values)
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    /**
+     * 电话号码校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkCompanyPhone(rules, value, callback) {
+      if (phoneReg(value) || isPhone(value)) {
+        callback()
+      } else {
+        callback('请填写正确的电话号码')
+      }
+    },
+    /**
+     * 邮编校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkPostcode(rules, value, callback) {
+      if (postcode(value)) {
+        callback()
+      } else {
+        callback('请输入正确格式的邮编')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.form-item-postcode {
+  margin-bottom: 0;
+}
+
+.search-postcode {
+  color: #0090ff;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>