feat(车企管理): 完善功能

mock/task.js

@@ -49,5 +49,27 @@ module.exports = [
         total: 10
       }
     }
+  },
+  {
+    url: '/company/list',
+    type: 'get',
+    response: config => {
+      const temp = []
+      for (let i = 0; i < 10; i++) {
+        temp.push({
+          companyName: 'xxxxx',
+          address: 'xxxxx',
+          mailCode: 'xxxxx',
+          companyPeople: 'xxxxx',
+          phoneNum: 'xxxxx',
+          createTime: '2020-11-25 23:26:08'
+        })
+      }
+      return {
+        rows: temp,
+        code: 200,
+        total: 10
+      }
+    }
   }
 ]

src/views/setting/company/components/dialog.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    title="新建"
+    width="1200"
+    append-to-body
+    destroy-on-close
+    :before-close="handleClose"
+  >
+    <el-form
+      ref="form"
+      class="company-form"
+      label-width="120px"
+      label-position="right"
+      :model="model"
+      :rules="rules"
+    >
+      <el-form-item label="企业名称：" prop="companyName">
+        <el-input v-model="model.companyName" placeholder="请输入企业名称" />
+      </el-form-item>
+      <el-form-item label="地址：" prop="address">
+        <el-input
+          v-model="model.address"
+          type="textarea"
+          :rows="4"
+          maxlength="200"
+          show-word-limit
+          placeholder="请输入地址"
+        />
+      </el-form-item>
+      <el-form-item label="邮编：" prop="mailCode">
+        <el-input v-model="model.mailCode" placeholder="请输入邮编" />
+      </el-form-item>
+      <el-form-item label="企业联系人：" prop="companyPeople">
+        <el-input
+          v-model="model.companyPeople"
+          placeholder="请输入企业联系人"
+        />
+      </el-form-item>
+      <el-form-item label="联系电话：" prop="phoneNum">
+        <el-input v-model="model.phoneNum" placeholder="请输入联系电话" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="handleClose()"> 取消 </el-button>
+      <el-button type="primary" @click="handleClose()"> 保存 </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    dialogData: {
+      default: () => {
+        return null
+      },
+      type: Object
+    },
+    dialogVisible: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      model: {},
+      rules: {
+        companyName: [
+          { required: true, message: '请输入企业名称', trigger: 'blur' }
+        ],
+        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+        mailCode: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
+        companyPeople: [
+          { required: true, message: '请输入企业联系人', trigger: 'blur' }
+        ],
+        phoneNum: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    dialogData(val) {
+      if (val) {
+        this.model = { ...val }
+      }
+    }
+  },
+  created() {},
+  methods: {
+    handleClose() {
+      this.model = {}
+      this.$emit('close', '123')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.company-form {
+  width: 80%;
+}
+</style>

src/views/setting/company/index.vue

@@ -7,18 +7,42 @@
       size="small"
       :inline="true"
     >
-      <el-form-item label="部门名称" prop="deptName">
+      <el-form-item label="" prop="deptName">
         <el-input
-          v-model="queryParams.deptName"
-          placeholder="请输入部门名称"
+          v-model="queryParams.companyName"
+          placeholder="企业名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="" prop="address">
         <el-input
-          v-model="queryParams.deptName"
-          placeholder="请输入部门名称"
+          v-model="queryParams.address"
+          placeholder="地址"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="" prop="mailCode">
+        <el-input
+          v-model="queryParams.mailCode"
+          placeholder="邮编"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="" prop="companyPeople">
+        <el-input
+          v-model="queryParams.companyPeople"
+          placeholder="企业联系人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="" prop="phoneNum">
+        <el-input
+          v-model="queryParams.phoneNum"
+          placeholder="联系电话"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -42,11 +66,10 @@
         <el-button
           v-hasPermi="['setting:company:add']"
           type="primary"
-          plain
           icon="el-icon-plus"
           size="mini"
-          @click="handleAdd"
-          >新增</el-button
+          @click="openCompanyDialog"
+          >新建</el-button
         >
       </el-col>
       <right-toolbar
@@ -62,22 +85,32 @@
       :default-sort="{ prop: 'createTime', order: 'descending' }"
       :data="tableData"
     >
-      <el-table-column width="100" label="序号" sortable align="left">
-        <template slot-scope="scope">
-          <span>{{ scope.$index + 1 }}</span>
-        </template>
+      <el-table-column
+        type="index"
+        width="100"
+        label="序号"
+        sortable
+        align="left"
+      >
       </el-table-column>
-      <el-table-column label="字段1" sortable align="left"> </el-table-column>
-      <el-table-column label="车企名称" align="left"> </el-table-column>
-      <el-table-column label="字段2" align="left"> </el-table-column>
-      <el-table-column label="字段3" align="left"> </el-table-column>
-      <el-table-column label="字段4" align="left"> </el-table-column>
-      <el-table-column label="字段5" align="left"> </el-table-column>
-      <el-table-column label="字段3" align="left"> </el-table-column>
-      <el-table-column label="创建时间" align="left" sortable prop="createTime">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
+      <el-table-column
+        label="企业名称"
+        prop="companyName"
+        sortable
+        align="left"
+      >
+      </el-table-column>
+      <el-table-column label="地址" prop="address" align="left">
+      </el-table-column>
+      <el-table-column label="邮编" prop="mailCode" align="left">
+      </el-table-column>
+      <el-table-column label="企业联系人" prop="companyPeople" align="left">
+      </el-table-column>
+      <el-table-column label="联系电话" prop="phoneNum" align="left">
+      </el-table-column>
+      <el-table-column label="创建人员" prop="phoneNum" align="left">
+      </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" align="left" sortable>
       </el-table-column>
       <el-table-column
         label="操作"
@@ -117,21 +150,28 @@
     >
     </pagination>
     <!--<yan-dialog :dialog-manger="dialogManger"></yan-dialog> -->
+    <company-dialog
+      :dialog-visible="dialogVisible"
+      :dialog-data="dialogData"
+      @close="closeDialog"
+    ></company-dialog>
   </page-standard>
 </template>
 <script>
 import page from '@/mixins/page'
-// import dialog from './components/dialog.vue'
+import companyDialog from './components/dialog.vue'
 export default {
   components: {
-    // 'yan-dialog': dialog
+    companyDialog
   },
   mixins: [page],
   data() {
     return {
-      listUrl: '/system/role/list',
+      dialogVisible: false,
+      listUrl: '/company/list',
       showSearch: true,
       tableData: [],
+      dialogData: null,
       dialogManger: {
         dialogVisible: false,
         refreshList: false,
@@ -148,14 +188,28 @@ export default {
     }
   },
   methods: {
-    handleAdd() {
-      this.dialogManger.dialogVisible = true
-      this.dialogManger.source = {}
+    closeDialog() {
+      this.dialogVisible = false
+      this.dialogData = null
+    },
+    // 打开企业弹窗
+    openCompanyDialog() {
+      this.dialogVisible = true
+    },
+    handleDelete() {
+      this.$modal
+        .confirm('是否确定删除客户')
+        .then(function () {
+          console.log('123')
+        })
+        .then(() => {
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
     },
-    handleDelete() {},
     handleUpdate(row) {
-      this.dialogManger.dialogVisible = true
-      this.dialogManger.source = row
+      this.dialogVisible = true
+      this.dialogData = row
     }
   }
 }