企业管理--企业管理页面

src/components/page/GlobalLayout.vue

@@ -3,65 +3,65 @@
 
     <template v-if="layoutMode === 'sidemenu'">
       <a-drawer
-        v-if="device === 'mobile'"
+          v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
+          :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
+          placement="left"
-        @close="() => this.collapsed = false"
+          @close="() => this.collapsed = false"
-        :closable="false"
+          :closable="false"
-        :visible="collapsed"
+          :visible="collapsed"
-        width="200px"
+          width="200px"
       >
         <side-menu
-          mode="inline"
+            mode="inline"
-          v-if="device === 'mobile'"
+            v-if="device === 'mobile'"
-          :menus="menus"
+            :menus="menus"
-          @menuSelect="menuSelect"
+            @menuSelect="menuSelect"
-          :theme="navTheme"
+            :theme="navTheme"
-          :collapsed="false"
+            :collapsed="false"
-          :collapsible="true"></side-menu>
+            :collapsible="true"></side-menu>
       </a-drawer>
 
       <side-menu
-        v-show="device === 'desktop'"
+          v-show="device === 'desktop'"
-        mode="inline"
+          mode="inline"
-        :menus="menus"
+          :menus="menus"
-        @menuSelect="myMenuSelect"
+          @menuSelect="myMenuSelect"
-        :theme="navTheme"
+          :theme="navTheme"
-        :collapsed="collapsed"
+          :collapsed="collapsed"
-        :collapsible="true"></side-menu>
+          :collapsible="true"></side-menu>
     </template>
     <!-- 下次优化这些代码 -->
     <template v-else>
       <a-drawer
-        v-if="device === 'mobile'"
+          v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
+          :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
+          placement="left"
-        @close="() => this.collapsed = false"
+          @close="() => this.collapsed = false"
-        :closable="false"
+          :closable="false"
-        :visible="collapsed"
+          :visible="collapsed"
-        width="200px"
+          width="200px"
       >
         <side-menu
-          mode="inline"
+            mode="inline"
-          :menus="menus"
+            :menus="menus"
-          @menuSelect="menuSelect"
+            @menuSelect="menuSelect"
-          :theme="navTheme"
+            :theme="navTheme"
-          :collapsed="false"
+            :collapsed="false"
-          :collapsible="true"></side-menu>
+            :collapsible="true"></side-menu>
       </a-drawer>
     </template>
 
     <a-layout
-      :class="[layoutMode, `content-width-${contentWidth}`]"
+        :class="[layoutMode, `content-width-${contentWidth}`]"
-      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
+        :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
       <!-- layout header -->
       <global-header
-        :mode="layoutMode"
+          :mode="layoutMode"
-        :menus="menus"
+          :menus="menus"
-        :theme="navTheme"
+          :theme="navTheme"
-        :collapsed="collapsed"
+          :collapsed="collapsed"
-        :device="device"
+          :device="device"
-        @toggle="toggle"
+          @toggle="toggle"
       />
 
       <!-- layout content -->
@@ -70,9 +70,9 @@
       </a-layout-content>
 
       <!-- layout footer -->
-<!--      <a-layout-footer style="padding: 0px">-->
+      <!--      <a-layout-footer style="padding: 0px">-->
-<!--        <global-footer />-->
+      <!--        <global-footer />-->
-<!--      </a-layout-footer>-->
+      <!--      </a-layout-footer>-->
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -82,20 +82,20 @@
 </template>
 
 <script>
-import SideMenu from "@/components/menu/SideMenu";
+import SideMenu from '@/components/menu/SideMenu'
-import GlobalHeader from "@/components/page/GlobalHeader";
+import GlobalHeader from '@/components/page/GlobalHeader'
-import GlobalFooter from "@/components/page/GlobalFooter";
+import GlobalFooter from '@/components/page/GlobalFooter'
 // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
 // import SettingDrawer from '@/components/setting/SettingDrawer'
 // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
 // update-end ---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
 
-import { triggerWindowResizeEvent } from "@/utils/util";
+import { triggerWindowResizeEvent } from '@/utils/util'
-import { mapState, mapActions } from "vuex";
+import { mapState, mapActions } from 'vuex'
-import { mixin, mixinDevice } from "@/utils/mixin.js";
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 
 export default {
-  name: "GlobalLayout",
+  name: 'GlobalLayout',
   components: {
     SideMenu,
     GlobalHeader,
@@ -112,7 +112,7 @@ export default {
       collapsed: false,
       activeMenu: {},
       menus: []
-    };
+    }
   },
   computed: {
     ...mapState({
@@ -124,16 +124,16 @@ export default {
   },
   watch: {
     sidebarOpened(val) {
-      this.collapsed = !val;
+      this.collapsed = !val
     }
   },
   created() {
     //--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
     //this.menus = this.mainRouters.find((item) => item.path === '/').children;
-    this.menus = this.permissionMenuList;
+    this.menus = this.permissionMenuList
 
     //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
-    this.collapsed = !this.sidebarOpened;
+    this.collapsed = !this.sidebarOpened
     //--update-begin----author:liusq---date:20210223------for:关于测边菜单遮挡内容问题详细说明 #2255
 
     // 根据后台配置菜单，重新排序加载路由信息
@@ -144,39 +144,39 @@ export default {
     //--update-end----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
   },
   methods: {
-    ...mapActions(["setSidebar"]),
+    ...mapActions(['setSidebar']),
     toggle() {
-      this.collapsed = !this.collapsed;
+      this.collapsed = !this.collapsed
-      this.setSidebar(!this.collapsed);
+      this.setSidebar(!this.collapsed)
-      triggerWindowResizeEvent();
+      triggerWindowResizeEvent()
     },
     menuSelect() {
       if (!this.isDesktop()) {
-        this.collapsed = false;
+        this.collapsed = false
       }
     },
     //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
     myMenuSelect(value) {
       //此处触发动态路由被点击事件
-      this.findMenuBykey(this.menus, value.key);
+      this.findMenuBykey(this.menus, value.key)
-      this.$emit("dynamicRouterShow", value.key, this.activeMenu.meta.title);
+      this.$emit('dynamicRouterShow', value.key, this.activeMenu.meta.title)
       // update-begin-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
-      let storeKey = "route:title:" + this.activeMenu.path;
+      let storeKey = 'route:title:' + this.activeMenu.path
-      this.$ls.set(storeKey, this.activeMenu.meta.title);
+      this.$ls.set(storeKey, this.activeMenu.meta.title)
       // update-end-author:sunjianlei date:20191223 for: 修复刷新后菜单Tab名字显示异常
     },
     findMenuBykey(menus, key) {
       for (let i of menus) {
         if (i.path == key) {
-          this.activeMenu = { ...i };
+          this.activeMenu = { ...i }
         } else if (i.children && i.children.length > 0) {
-          this.findMenuBykey(i.children, key);
+          this.findMenuBykey(i.children, key)
         }
       }
     }
     //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
   }
-};
+}
 
 </script>
 
@@ -684,6 +684,11 @@ body {
     display: block;
     margin-bottom: 24px;
     white-space: nowrap;
+    margin-left: 10px;
+
+    .ant-btn {
+      margin-right: 8px;
+    }
   }
 
 }

src/utils/validate.js

@@ -4,7 +4,7 @@
  *  之前的正则 /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  */
 export function isEmail(s) {
-  return /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(s)
+	return /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(s)
 }
 
 /**
@@ -12,7 +12,7 @@ export function isEmail(s) {
  * @param {*} s
  */
 export function isPhone(s) {
-  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
+	return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
 }
 
 /**
@@ -20,7 +20,7 @@ export function isPhone(s) {
  * @param {*} s
  */
 export function isURL(s) {
-  return /^http[s]?:\/\/.*/.test(s)
+	return /^http[s]?:\/\/.*/.test(s)
 }
 
 /**
@@ -28,19 +28,28 @@ export function isURL(s) {
  * message: 密码长度至少8位，并包括数字、小写字母、大写字母和特殊符号4类中的3类
  */
 export function passwordReg(s) {
-  return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,30}$/.test(s)
+	return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,30}$/.test(s)
 }
 
 /**
  * 手机号
  * */
 export function phoneReg(s) {
-  return /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$/.test(s)
+	return /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$/.test(s)
 }
 
 /**
  * 不可输入中文
  */
-export function chineseReg(s){
+export function chineseReg(s) {
-  return /[\u4E00-\u9FA5]/g.test(s)
+	return /[\u4E00-\u9FA5]/g.test(s)
+}
+
+/**
+ * 邮编
+ * @param s
+ * @returns {boolean}
+ */
+export function postcode(s) {
+	return /^[0-9]\d{5}$/.test(s)
 }

src/views/businessManagement/BusinessManagement.vue

@@ -0,0 +1,149 @@
+<template>
+  <a-card :bordered="false">
+    <!--    查询区域-start -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="企业名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <!--              v-model="queryParam.businessName"-->
+              <a-input placeholder="请输入企业名称"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" icon="search">查询</a-button>
+              <a-button icon="reload">重置</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--    查询区域-end-->
+
+    <!--    操作按钮区域-->
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
+      <a-button type="primary" icon="import">导入</a-button>
+      <a-button type="primary" icon="export">导出</a-button>
+      <a-button type="primary" icon="download">下载模板</a-button>
+      <a-button type="danger" icon="delete">批量删除</a-button>
+    </div>
+    <!--    操作按钮区域-end-->
+
+    <!--    table表格区域-->
+    <div>
+      <a-table
+          ref="table"
+          size="middle"
+          bordered
+          rowKey="id"
+          :columns="columns"
+          :scroll="{x: 1000}"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          @change="handleTableChange"
+          class="j-table-force-nowrap">
+        <template slot="htmlSlot" slot-scope="text">
+          <div v-html="text"></div>
+        </template>
+        <template slot="imgSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" height="25px" alt=""
+               style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
+                      :value="text" :length="20"/>
+        </template>
+
+        <span slot="action" class="action-span-cell" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+          <a @click="handleDelete(record.id)">删除</a>
+        </span>
+      </a-table>
+    </div>
+    <business-mangement-modules ref="modalForm"></business-mangement-modules>
+  </a-card>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import JEllipsis from '@comp/jero/JEllipsis'
+import BusinessMangementModules from '@views/businessManagement/modules/BusinessMangementModules'
+
+export default {
+  name: 'BusinessManagement',
+  components: { JEllipsis, BusinessMangementModules },
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 10 }
+      },
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        }, {
+          title: '企业名称',
+          align: 'center',
+          width: 180,
+          dataIndex: ''
+        }, {
+          title: '公司地址',
+          align: 'center',
+          width: 180,
+          dataIndex: ''
+        }, {
+          title: '公司电话',
+          align: 'center',
+          dataIndex: ''
+        }, {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: ''
+        }, {
+          title: '银行户名',
+          align: 'center',
+          width: 140,
+          dataIndex: ''
+        }, {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 160,
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '',
+        delete: '',
+        deleteBatch: '',
+        exportXlsUrl: '',
+        importExcelUrl: '',
+        exportTemplateUrl: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import '~@assets/less/common.less';
+</style>

src/views/businessManagement/modules/BusinessMangementModules.vue

@@ -0,0 +1,215 @@
+<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="['businessName',validatorRules.businessName]"
+                       :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="请输入公司地址"
+                       :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="请输入公司电话"
+                       :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" class="form-item-postcode">
+              <a-input placeholder="请输入邮编"
+                       v-decorator="['postcode',validatorRules.postcode]"
+                       :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="请输入银行户名"
+                       :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="请输入开户行"
+                       :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="请输入银行账号"
+                       :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="请输入税号"
+                       :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="请输入备注"
+                  :auto-size="{ minRows: 3, maxRows: 6 }"
+                  :maxLength='200'
+                  @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 } from '@/utils/validate'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'BusinessMangementModules',
+  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: {
+        businessName: {
+          rules: [{ required: true, message: '请输入企业名称' }],
+          validateTrigger: 'blur'
+        },
+        postcode: {
+          rules: [{ validator: this.checkPostcode }]
+        }
+      }
+    }
+  },
+  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, 'approvalDocumentNumber', 'dateYear', 'chargeNoticeName', 'chargeNoticeFileId'))
+      })
+    },
+    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
+     */
+    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>