字典

src/views/backstage/customMgt/customTabulate/add.vue

+<template>
+  <!-- 表单渲染 -->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelView" :visible="visible" :title="title" width="860px">
+    <el-form ref="formViewRef" :model="formData" :rules="rules" :status-icon="true" label-width="240px">
+      <el-form-item label="企业名称：" class="form-cell" prop="name">
+        <div class="cell-box">
+          <el-input v-model="formData.name" class="cell-input" />
+        </div>
+      </el-form-item>
+      <el-form-item label="所属行业：" class="form-cell" prop="hy">
+        <div class="cell-box">
+          <el-select v-model="formData.hy" placeholder="无" class="cell-input">
+            <el-option v-for="item in dict.industry_type" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="营业执照：" class="form-cell">
+        <div class="cell-box">
+          <el-input v-model="formData.photo" style="width:160px;" placeholder="请上传营业执照" disabled />
+          <input type="file" name="image" @change="excelImport($event)">
+        </div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="cancelView">取消</el-button>
+      <el-button type="primary" @click="submitForm()">提交</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  dicts: ['industry_type'],
+  data() {
+    return {
+      visible: false,
+      title: '客户信息',
+      formData: {
+        name: ''
+      },
+      rules: {
+        name: { required: true, message: '请输入企业名称', trigger: 'blur' }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.loadData()
+    })
+  },
+  methods: {
+    showView() {
+      this.visible = true
+    },
+    hideView() {
+      this.$refs.formViewRef.resetFields()
+      this.visible = false
+    },
+    cancelView() {
+      this.hideView()
+    },
+    submitForm() {
+      this.$refs.formViewRef.validate(valid => {
+        if (valid) {
+
+        }
+      })
+    },
+    excelImport(event) {
+      const file = event.target.files[0]
+      const formData = new FormData()
+      formData.append('files', file)
+    },
+    loadData() {
+
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.cell-box {
+  min-width: 120px;
+  .cell-input {
+    width: 420px;
+  }
+  >>>.el-input__inner {
+    border: 1px solid rgba(100, 100, 100, 0.1);
+    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 5px;
+  }
+  >>>.el-input.is-disabled .el-input__inner {
+    border-radius: 0;
+    border: 0;
+    border-bottom: 1px solid rgba(100, 100, 100, 0.4);
+    background: white;
+    cursor: text;
+  }
+  >>>.el-input.is-disabled .el-input__icon {
+    cursor: text;
+  }
+  //>>>.el-icon-arrow-up:before {
+  //  content: '';
+  //}
+}
+</style>

src/views/backstage/customMgt/customTabulate/index.vue

@@ -12,13 +12,13 @@
       <el-select v-model="query.status" clearable placeholder="请选择状态" style="width: 120px">
         <el-option v-for="item in dict.custom_status" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <date-range-picker v-model="query.createTime" startPlaceholder="开始日期（注册）" style="width: 280px" />
+      <date-range-picker v-model="query.createTime" start-placeholder="开始日期（注册）" style="width: 280px" />
       <el-button type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
       <el-button type="warning" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
     </div>
     <div class="toolbar">
       <div>
-        <el-button type="primary" icon="el-icon-circle-plus-outline">添加客户</el-button>
+        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toAdd">添加客户</el-button>
       </div>
       <div style="text-align: right">
         <el-button type="danger" icon="el-icon-help" @click="batchOperate(0)">批量锁定</el-button>
@@ -56,14 +56,15 @@
       <!--分页组件-->
       <el-pagination :total="total" :current-page="page" :page-size="pageSize" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
     </div>
-
+    <add-view ref="addView" />
   </div>
 </template>
 <script>
 import DateRangePicker from '@/components/DateRangePicker'
+import AddView from './add'
 
 export default {
-  components: { DateRangePicker },
+  components: { DateRangePicker, AddView },
   dicts: ['user_status', 'custom_status', 'area_province'],
   data() {
     return {
@@ -123,6 +124,9 @@ export default {
         data.enabled = !data.enabled
       })
     },
+    toAdd() {
+      this.$refs.addView.showView()
+    },
     toEdit(item) {
 
     },