1、什么是ElementUI？
Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库
1.1、搭建elementUI脚手架(vue-admin-template)
# Clone project git clone https://github.com/PanJiaChen/vue-admin-template.git # Install dependencies npm install # Serve with hot reload at localhost:9528 npm run dev # Build for production with minification npm run build # Build for production and view the bundle analyzer report npm run build --report
在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面，点击登录，此时模板页面就搭建好了。
打开文件夹vue-admin-template，主要的目录结构如下图所示：
1.2 项目初始化调整
1.2.1 关闭语法规范性检查
修改 config/index.js ，将useEslint的值改为false。
此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。
我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。作为初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。
1.2.2 国际化设置
打开main.js 找到这句代码
import locale from 'element‐ui/lib/locale/lang/en'
我们将en修改为zn-CN
import locale from 'element‐ui/lib/locale/lang/zh‐CN'
修改后组件都是按照中文的习惯展示
1.2.3 与easy-mock对接
(1)修改config下的dev.env.js中的BASE_API为easy-mock的Base URL
- ....
- BASE_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',
- ....
修改后发现无法登录上vue-admin-templates，原因是修改了BASE_API，需要在自己的Easy-mock中修改验证
(2)easy-mock添加登陆认证模拟数据 地址: /user/login
提交方式:post
内容:
{ "code": 20000, "data": { "roles": ["admin"], "role": ["admin"], "name": "admin", "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif" } }
(3)添加返回用户信息url模拟数据 地址:/user/info
提交方式:get
内容:
{ "code": 20000, "data": { "roles": ["admin"], "role": ["admin"], "name": "admin", "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif" } }
此时又可以登录上vue-admin-template，且成功与自己的easy-mock对接上了。
2.elementUI的table组件,实现列表展示
(1)在src/api/下创建gathering.js，书写代码：
import request from '@/utils/request' export function addUserSysStore(data) { return request({ url: '/system/store/SwJsStoreadd', method: 'post', data: data }) }
导入request模块实际上是对ajax的封装(在utils/request.js中)，上述的url和method即为请求的url和method
(2)在views/table中创建 gathering.vue
vue主要分为视图区<template>、逻辑区/代码区<script>(用于控制视图区的显示)
<template> <div class="app-container"> <el-row :gutter="20"> <!--用户数据--> <el-col :span="20" :xs="24" class="tooltup"> <!-- 表头内容 --> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item prop="name"> <el-input v-model="queryParams.name" id="miaoshu" placeholder="请输入公司名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button size="mini" class="biaoto-buttonchaxuen" @click="handleQuery">查询</el-button> <el-button size="mini" class="biaoto-buttonchuangjian" @click="handlechuangjiang">创建</el-button> <el-button type="danger" class="biaoto-buttonshanchu" @click="handleDelete">删除</el-button> <el-button plain size="mini" class="biaoto-buttondaoru" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button> <el-button plain size="mini" class="biaoto-buttondaochu" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button> <el-button plain size="mini" class="biaoto-buttondaochu" @click="daoying" v-hasPermi="['system:user:export']">打印条码</el-button> </el-form-item> <el-form-item class="right-backtools"> <!-- <el-input v-model="this.total" placeholder="描述/助记符/品牌/UPC/" clearable style="width: 240px" @keyup.enter.native="handleQuery">第条/{{ this.total }}</el-input> --> <!-- <span>2/{{this.total}}</span> --> <b> <el-button icon="el-icon-back" size="mini" class="right-buttonback"></el-button> </b> <el-button icon="el-icon-right" size="mini" class="right-buttonback"></el-button> <el-button icon="el-icon-s-tools" size="mini" class="right-buttonback"></el-button> </el-form-item> </el-form> <el-table v-loading="loading" :data="userList" :default-sort="{ prop: 'name', order: 'descending' }" style="width:90%;height: 8%;" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="50" align="center" /> <el-table-column label="公司名称" align="center" key="name" prop="name" sortable /> <el-table-column label="公司地址" align="center" key="address" prop="address" locationNum /> <el-table-column label="联系人" align="center" key="telPeople" prop="telPeople" sortable /> <el-table-column label="联系电话" align="center" key="phone" prop="phone" sortable /> <el-table-column label="发票类型" align="center" key="invoiceType" prop="invoiceType" sortable> <template scope="scope"> <div>{{ scope.row.invoiceType == 1 ? "增值税专用发票" : scope.row.invoiceType == 2 ? "增值税普通发票" : scope.row.invoiceType == 3 ? "个人普通发票" : scope.row.invoiceType == 4 ? "不开发票" :"发票类型不确定" }} </div> </template> </el-table-column> <el-table-column label="状态" align="center" key="ifEnabled" prop="ifEnabled" sortable> <template scope="scope"> <div>{{ scope.row.ifEnabled == -1 ? "启用" : scope.row.ifEnabled == 1 ? "禁用":"状态不确定" }} </div> </template> </el-table-column> <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width"> <template slot-scope="scope" v-if="scope.row.id !== 1"> <el-button size="mini" type="text" icon="el-icon-edit" class="button-caozuoxougai" @click="handlexiangqengSelect(scope.row)" v-hasPermi="['system:user:edit']">修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" class="button-caozuoxougai" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button> <el-button size="mini" type="text" icon="el-icon-share" class="caozuoxiangqeng" @click="handleSelect(scope.row)" v-hasPermi="['system:user:listselect']">详情</el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="[2, 5, 10, 15, 20]" class="pagintotal" /> </el-col> </el-row> <!-- 修改用户配置对话框 --> <el-dialog :title="title1" :visible.sync="open"> <el-form ref="form" :model="form" label-width="45%" class="chuangjianform"> <el-row> <el-col :span="11"> <el-form-item label="公司名称" prop="name"> <el-input v-model="form.name" maxlength="30" placeholder="请输入名称" style="width:98%" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系人" prop="telPeople"> <el-input v-model="form.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="公司地址" prop="address"> <el-input v-model="form.address" placeholder="请输入公司地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系电话" prop="phone"> <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="出库顺序" prop="skuSort"> <el-input v-model="form.skuSort" placeholder="请输入出库顺序" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票账号" prop="invoiceNumber"> <el-input v-model="form.invoiceNumber" placeholder="请输入发票账号" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票地址" prop="invoiceAddress"> <el-input v-model="form.invoiceAddress" placeholder="请输入发票地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票电话" prop="invoicePhone"> <el-input v-model="form.invoicePhone" placeholder="请输入发票电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票类型" prop="invoiceType"> <!-- <el-input v-model="form.invoiceType" placeholder="请输入发票类型" maxlength="30" /> --> <el-select v-model="gongyingshangxxweihuleix.invoiceType" placeholder="请输入发票类型"> <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票开户行" prop="invoiceBank"> <el-input v-model="form.invoiceBank" placeholder="请输入发票开户行" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber"> <el-input v-model="form.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="状态" prop="ifEnabled"> <!-- <el-input v-model="form.ifEnabled" placeholder="请输入状态" maxlength="30" /> --> <el-select v-model="gongyingshangxxweihuleix.ifEnabled" placeholder="请输入发票类型"> <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleUpdate">确定</el-button> <!-- <el-button @click="cancel">取 消</el-button> --> </div> </el-dialog> <!-- 详情 --> <el-dialog :title="title2" :visible.sync="open1"> <el-form ref="form1" :model="form1" label-width="45%" class="chuangjianform"> <el-row> <el-col :span="11"> <el-form-item label="公司名称" prop="name"> <el-input v-model="form1.name" maxlength="30" placeholder="请输入名称" style="width:98%" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系人" prop="telPeople"> <el-input v-model="form1.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="公司地址" prop="address"> <el-input v-model="form1.address" placeholder="请输入公司地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系电话" prop="phone"> <el-input v-model="form1.phone" placeholder="请输入联系电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="出库顺序" prop="skuSort"> <el-input v-model="form1.skuSort" placeholder="请输入出库顺序" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票账号" prop="invoiceNumber"> <el-input v-model="form1.invoiceNumber" placeholder="请输入发票账号" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票地址" prop="invoiceAddress"> <el-input v-model="form1.invoiceAddress" placeholder="请输入发票地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票电话" prop="invoicePhone"> <el-input v-model="form1.invoicePhone" placeholder="请输入发票电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票类型" prop="invoiceType"> <el-input v-model="form1.invoiceType" placeholder="请输入发票类型" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票开户行" prop="invoiceBank"> <el-input v-model="form1.invoiceBank" placeholder="请输入发票开户行" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber"> <el-input v-model="form1.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" /> </el-form-item> </el-col> <!-- <el-col :span="11"> <el-form-item label="状态" prop="ifEnabled"> <el-input v-model="form1.ifEnabled" placeholder="请输入状态" maxlength="30" /> </el-form-item> </el-col> --> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <!-- <el-button type="primary" @click="handleUpdate">确定</el-button> --> <!-- <el-button @click="cancel">取 消</el-button> --> </div> </el-dialog> <!-- 创建 --> <el-dialog :title="title" :visible.sync="open2"> <el-form ref="form2" :model="form2" label-width="45%" :rules="rules" class="chuangjianform"> <el-row> <el-col :span="11"> <el-form-item label="公司名称" prop="name"> <el-input v-model="form2.name" maxlength="30" placeholder="请输入名称" style="width:98%" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系人" prop="telPeople"> <el-input v-model="form2.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="公司地址" prop="address"> <el-input v-model="form2.address" placeholder="请输入公司地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系电话" prop="phone"> <el-input v-model="form2.phone" placeholder="请输入联系电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="出库顺序" prop="skuSort"> <el-input v-model="form2.skuSort" placeholder="请输入出库顺序" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票账号" prop="invoiceNumber"> <el-input v-model="form2.invoiceNumber" placeholder="请输入发票账号" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票地址" prop="invoiceAddress"> <el-input v-model="form2.invoiceAddress" placeholder="请输入发票地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票电话" prop="invoicePhone"> <el-input v-model="form2.invoicePhone" placeholder="请输入发票电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票类型" prop="invoiceType"> <!-- <el-input v-model="form2.invoiceType" placeholder="请输入发票类型" maxlength="30" /> --> <el-select v-model="form2.invoiceType" placeholder="请输入发票类型"> <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票开户行" prop="invoiceBank"> <el-input v-model="form2.invoiceBank" placeholder="请输入发票开户行" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber"> <el-input v-model="form2.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="状态" prop="ifEnabled"> <!-- <el-input v-model="form2.ifEnabled" placeholder="请输入状态" maxlength="30" /> --> <el-select v-model="form2.ifEnabled" placeholder="请输入状态"> <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="12" class="GongyingShangjiaoyan"> <el-form-item> <el-button type="primary" @click="handleAdd">确定</el-button> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <!-- <el-button @click="cancel">取 消</el-button> --> </div> </el-dialog> <!-- 用户导入对话框 --> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip text-center" slot="tip"> <div class="el-upload__tip" slot="tip"> <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 </div> <span>仅允许导入xls、xlsx格式文件。</span> <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> </div> </el-upload> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitFileForm">确 定</el-button> <el-button @click="upload.open = false">取 消</el-button> </div> </el-dialog> <el-dialog :title="title6" :visible.sync="open6"> <!-- startprint--> <!-- <div id="printContent">打印内容</div> --> <!--endprint --> <div ref="print">我是打印哈哈哈</div> </el-dialog> </div> </template> <script> // import { addUserSysStore, listUserStore, updateUserStore, removeSysStore } from "@/api/WareSys/Cangkuxxguanli"; // import { addUserSysStoreku, listUserStoreku, updateUserStoreku, removeSysStoreku } from "@/api/WareSys/Kuweixxweihu"; import { addUserSysSupplier, listUserSupplier, updateUserSupplier, removeSysSupplier } from "@/api/WareSys/gongyingshangxxweihu"; import { getToken } from "@/utils/auth"; import { treeselect } from "@/api/system/dept"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; export default { name: "store", dicts: ['sys_normal_disable', 'sw_js_store_type', 'sys_user_sex', 'sw_js_store_type_manage_mode'], components: { Treeselect }, data() { const phoneValidator11 = (rule, value, callback) => { if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号 callback() } else { callback(new Error('请输入正确手机号')) } } return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 用户表格数据 userList: null, // 弹出层标题 title: "", title1: "", title2: "", title6: "", // 部门树选项 deptOptions: undefined, // 是否显示弹出层 open: false, open1: false, open2: false, open6: false, // 部门名称 deptName: undefined, // 默认密码 initPassword: undefined, // 日期范围 dateRange: [], // 岗位选项 postOptions: [], //供应商信息维护 gongyingshangxxweihuleix:{ invoiceType:'1', ifEnabled:'-1' }, //仓库类型 CangkuLeixvalue: [{ value: '1', label: '普通仓库' }, { value: '2', label: 'CDC仓库' }], value: '', //发票类别 fapiaoleix: [{ value: '1', label: '增值税专用发票' }, { value: '2', label: '增值税普通发票' }, { value: '3', label: '个人普通发票' }, { value: '4', label: '不开发票' }], value: '', //状态 ZhuangTaivalue: [{ value: '-1', label: '启用' }, { value: '1', label: '禁用' }], value: '', // 角色选项 roleOptions: [], // 表单参数 form: { address: "", ifEnabled: "", invoiceAddress: "", invoiceBank: "", invoiceNumber: "", invoicePhone: "", invoiceTaxpayerNumber: "", invoiceType: "", name: "", phone: "", skuSort: "", telPeople: "" }, form1: { // classifyId: "", // brand: "", // model: "", // upc: "", // description: "", // ifEnabled: "" }, form2: { // classifyId: "", // brand: "", // model: "" address: "", ifEnabled: "", invoiceAddress: "", invoiceBank: "", invoiceNumber: "", invoicePhone: "", invoiceTaxpayerNumber: "", invoiceType: "", name: "", phone: "", skuSort: "", telPeople: "" }, defaultProps: { children: "children", label: "label" }, // 用户导入参数 upload: { // 是否显示弹出层（用户导入） open: false, // 弹出层标题（用户导入） title: "", // 是否禁用上传 isUploading: false, // 是否更新已经存在的用户数据 updateSupport: 0, // 设置上传的请求头部 headers: { Authorization: "Bearer " + getToken() }, // 上传的地址 url: process.env.VUE_APP_BASE_API + "/system/supplier/importSwJsSupplier" }, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, page: 1, size: 10, total: this.total, name: undefined, address: undefined }, // 列信息 // columns: [ // { // title:'状态', // dataIndex:'ifEnabled', // scopedSlots: { customRender: 'ifEnabled' } // } // ], // 手机号校验器 //表单校验 rules: { name: [ { required: true, message: "公司名称不能为空!", trigger: "blur" } ], telPeople: [ { required: true, message: "联系人不能为空!", trigger: "blur" } ], address: [ { required: true, message: "公司地址不能为空!", trigger: "blur" } ], phone: [ { required: true, message: "联系电话不能为空!", trigger: "blur" }, { validator: phoneValidator11, trigger: 'blur' } ], skuSort: [ { required: true, message: "出库顺序不能为空!", trigger: "blur" } ], invoiceNumber: [ { required: true, message: "发票地址不能为空!", trigger: "blur" } ], invoiceAddress: [ { required: true, message: "发票账号不能为空!", trigger: "blur" } ], invoicePhone: [ { required: true, message: "发票电话不能为空!", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" } ], invoiceType: [ { required: true, message: "发票类型不能为空!", trigger: "blur" } ], invoiceBank: [ { required: true, message: "发票开户行不能为空!", trigger: "blur" } ], invoiceTaxpayerNumber: [ { required: true, message: "纳税人识别号不能为空!", trigger: "blur" } ], ifEnabled: [ { required: true, message: "状态不能为空!", trigger: "blur" } ] }, }; }, watch: { // 根据名称筛选部门树 deptName(val) { this.$refs.tree.filter(val); } }, created() { this.getList(); this.getConfigKey("sys.user.initPassword").then(response => { // this.initPassword = response.msg; }); this.getDicts("sw_js_store_type").then(response => { this.form.type = response.rows; }); // this.form.type = this.dict[0].label; }, methods: { // submitForm() { // return new Promise((resole, reject) => { // this.$refs['form2'].validate((valid) => { // if (valid) { // console.log('submit!'); // resole(this.form2); // } else { // console.log('error submit!!'); // reject(); // } // }) // }) // }, /** 查询用户列表 */ getList() { this.loading = true; listUserSupplier(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.userList = response.data.rows; this.total = response.data.total; console.log(response.data.rows, 3369); // console.log(response.data.content, 339688); this.deleteFlag = response.data.rows.deleteFlag; this.loading = false; } ); }, // /** 查询部门下拉树结构 */ // getTreeselect() { // treeselectt().then(response => { // response.data.forEach((res) => { // res.code = res.label ? res.label.substring(res.label.indexOf("-") + 1) : "" // res.label = res.label ? res.label.substring(0, res.label.indexOf("-")) : "" // if (res.children) { // res.children.forEach((i) => { // i.code = i.label ? i.label.substring(i.label.indexOf("-") + 1) : "" // i.label = i.label ? i.label.substring(0, i.label.indexOf("-")) : "" // }) // } // }) // this.deptOptions = response.data; // // this.deptOptions = response.data[0].label.substring(0, response.data[0].label.indexOf("-")); // // console.log(response.data[response.data.length].label.substring(0, response.data[response.data.length].label.indexOf("-")),123456789); // // console.log(response.data.label); // // console.log(JSON.stringify(Object.assign({}, response.data))); // // var j = JSON.stringify(Object.assign({}, response.data)) // // for(var key in j) // // { // // // alert(); // // // console.log(key); // // } // // console.log(response); // // console.log(response.data); // }); // }, // 筛选节点 // filterNode(value, data) { // // if (!value) return true; // alert("ddd"); // return data.indexOf(value) !== -1; // }, // 节点单击事件 // handleNodeClick(data) { // // console.log(data) // // this.queryParams.deptId = data.id; // // console.log(data.label,88888); // // const v1=data.label.substring(0, data.label.indexOf("-")); // this.form.classifyNum = ""; // for (let i = 0; i < (data.code.split("-")).length - 1; i++) { // if (i != 0) { // this.form.classifyNum += ("-" + (data.code.split("-"))[i]) // } else { // this.form.classifyNum += (data.code.split("-"))[i] // } // } // // this.form.classifyNum = data.code ? data.code.substring(0,data.code.indexOf("-") ):""//data.label.substring(v1.length+1, data.label.length); // this.form.classifyName = data.label // this.form.id = (data.code.split("-"))[data.code.split("-").length - 1] // // console.log(data.code ? data.code.substring(data.code.indexOf("-") + 1) : ""); // this.handleQuery(); // }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { classifyName: undefined, classifyNum: undefined }; // this.resetForm("form"); }, // 表单重置 reset01() { this.form2 = { address: undefined, ifEnabled: undefined, invoiceAddress: undefined, invoiceBank: undefined, invoiceNumber: undefined, invoicePhone: undefined, invoiceTaxpayerNumber: undefined, invoiceType: undefined, name: undefined, phone: undefined, skuSort: undefined, telPeople: undefined }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { // var neirong = $('#miaoshu').val(); this.userList.name = this.form.name; this.getList(); this.queryParams.pageNum = 1; this.queryParams.name = ""; // this.getList(); // this.queryParams.pageNum = this.form.classifyName; console.log(this.queryParams); // this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.dateRange = []; this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.userId); this.single = selection.length != 1; this.multiple = !selection.length; }, // 更多操作触发 handleCommand(command, row) { switch (command) { case "handleResetPwd": this.handleResetPwd(row); break; case "handleAuthRole": this.handleAuthRole(row); break; default: break; } }, /** 新增按钮操作 */ handleAdd() { this.$refs["form2"].validate((item)=>{ if(item){ // alert("可以提交"); addUserSysSupplier(this.form2).then(response => { // console.log(this.from.parent_id, 123456789); // this.classifyId = response.posts; // console.log(response.posts,123456); this.title = "添加用户"; this.$message({ message: '恭喜你，添加成功', type: 'success', style: 'color:red;!important' }); // this.getTreeselect(); // this.submitShangpin(); this.submitShangpin(); this.getList(); this.open2 = false; this.reset01(); }); }else{ // alert("不可提交"); this.$message.error('请注意规范'); } }) // this.submitForm(); // if (this.form2.name != null || this.form2.address != undefined || this.form2.telPeople != undefined) { // // console.log(this.form.id, 123456); // addUserSysSupplier(this.form2).then(response => { // // console.log(this.from.parent_id, 123456789); // // this.classifyId = response.posts; // // console.log(response.posts,123456); // this.title = "添加用户"; // this.$message({ message: '恭喜你，添加成功', type: 'success', style: 'color:red;!important' }); // // this.getTreeselect(); // // this.submitShangpin(); // this.submitShangpin(); // this.getList(); // this.open2 = false; // this.reset01(); // console.log(this.form2.ifEnabled, 123456); // }); // } else { // this.$message.error('输入的内容不能为空呀'); // } // this.reset(); // } else { // this.$message.error('错了哦，商品名称没有填呢'); // } }, handlechuangjiang() { this.open2 = true; }, /** 修改按钮操作 */ handleUpdate() { if (this.form.name != undefined) { let row = {} row.address = this.form.address; row.ifEnabled = this.gongyingshangxxweihuleix.ifEnabled; row.invoiceAddress = this.form.invoiceAddress; row.invoiceBank = this.form.invoiceBank; row.invoiceNumber = this.form.invoiceNumber; row.invoicePhone = this.form.invoicePhone; row.invoiceTaxpayerNumber = this.form.invoiceTaxpayerNumber; row.invoiceType = this.gongyingshangxxweihuleix.invoiceType; row.name = this.form.name; row.phone = this.form.phone; row.skuSort = this.form.skuSort; row.telPeople = this.form.telPeople; row.id = this.form.id; // console.log(this.form.id); updateUserSupplier(JSON.stringify(row)).then(response => { // console.log(response,789) // this.form = response.data; // this.name = response.name; // this.type = response.type; // this.deliveryPriority = response.deliveryPriority; // this.enableTotalOrder = response.enableTotalOrder; // this.enableTakeGoods = response.enableTakeGoods; // this.manageMode = response.manageMode; // this.ifEnabled = response.ifEnabled; // this.sysUserId = response.sysUserId; console.log(this.form, 789) // this.submitShangpin(); this.getList(); this.open = false; this.$message({ message: '恭喜你，修改成功', type: 'success' }); }); } else { this.$message.error('错了哦，商品名称没有填呢'); } }, /** 详情按钮操作**/ handleSelect(row) { this.open1 = true; this.form1.id = row.id; this.form1.address = row.address; this.form1.invoiceAddress = row.invoiceAddress; this.form1.invoiceBank = row.invoiceBank; this.form1.invoiceNumber = row.invoiceNumber; this.form1.invoicePhone = row.invoicePhone; this.form1.invoiceTaxpayerNumber = row.invoiceTaxpayerNumber; this.form1.invoiceType = row.invoiceType; this.form1.name = row.name; this.form1.phone = row.phone; this.form1.skuSort = row.skuSort; this.form1.ifEnabled = row.ifEnabled; this.form1.telPeople = row.telPeople; }, /** 修改详情按钮操作**/ handlexiangqengSelect(row) { console.log(row) // this.getList(); this.open = true; console.log(row, 7788521); this.form.id = row.id; this.form.address = row.address; this.form.invoiceAddress = row.invoiceAddress; this.form.invoiceBank = row.invoiceBank; this.form.invoiceNumber = row.invoiceNumber; this.form.invoicePhone = row.invoicePhone; this.form.invoiceTaxpayerNumber = row.invoiceTaxpayerNumber; this.form.invoiceType = row.invoiceType; this.form.name = row.name; this.form.phone = row.phone; this.form.skuSort = row.skuSort; this.form.ifEnabled = row.ifEnabled; this.form.telPeople = row.telPeople; }, /** 数形列表的商品分类按钮**/ submitShangpin() { this.reset(); }, //列表刷新 liebiaoshuax() { this.getList(); }, /** 重置密码按钮操作 */ handleResetPwd(row) { this.$prompt('请输入"' + row.userName + '"的新密码', "提示", { confirmButtonText: "确定", cancelButtonText: "取消", closeOnClickModal: false, inputPattern: /^.{5,20}$/, inputErrorMessage: "用户密码长度必须介于 5 和 20 之间" }).then(({ value }) => { resetUserPwd(row.userId, value).then(response => { this.$modal.msgSuccess("修改成功，新密码是：" + value); }); }).catch(() => { }); }, /** 分配角色操作 */ handleAuthRole: function (row) { const userId = row.userId; this.$router.push("/system/user-auth/role/" + userId); }, // /** 提交按钮 */ // submitForm: function () { // this.$refs["form"].validate(valid => { // if (valid) { // if (this.form.userId != undefined) { // updateUserStore(this.form).then(response => { // this.$modal.msgSuccess("修改成功"); // this.open = false; // this.getList(); // }); // } else { // addUser(this.form).then(response => { // this.$modal.msgSuccess("新增成功"); // this.open = false; // this.getList(); // }); // } // } // }); // }, /** 删除按钮操作 */ handleDelete(row) { // row.classifyId = this.form.classifyId; // row.brand = this.form.brand; // row.model = this.form.model; // row.upc = this.form.upc; // row.description = this.form.description; // row.ifEnabled = this.form.ifEnabled; // row.id=this.form.id; console.log(row, 2222); this.$modal.confirm('是否确认删除用户编号为"' + JSON.stringify(row.id) + '"的数据项？').then(function () { return removeSysSupplier(JSON.stringify(row)); }).then((response) => { this.submitShangpin(); this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('/system/supplier/SwJsSupplierexport', { ...this.queryParams }, `user_${new Date().getTime()}.xlsx`) }, // handleExport() { // const queryParams = this.queryParams; // this.$confirm('是否确认导出所有用户数据项?', "警告", { // confirmButtonText: "确定", // cancelButtonText: "取消", // type: "warning" // }).then(function () { // return exportUser(queryParams); // }).then(response => { // this.download(response.msg); // }).catch(function () { }); // }, /** 导入按钮操作 */ handleImport() { this.upload.title = "商品分类"; this.upload.open = true; }, /** 下载模板操作 */ importTemplate() { this.download('/system/supplier/importSwJsSupplierTemplate', { }, `user_template_${new Date().getTime()}.xlsx`) }, // 文件上传中处理 handleFileUploadProgress(event, file, fileList) { this.upload.isUploading = true; }, // 文件上传成功处理 handleFileSuccess(response, file, fileList) { this.upload.open = false; this.upload.isUploading = false; this.$refs.upload.clearFiles(); this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true }); this.getList(); }, // 提交上传文件 submitFileForm() { this.$refs.upload.submit(); }, daoying(){ // this.$print(this.$refs.print); } //测试树状菜单 // handleNodeClick(data) { // console.log(data); // } } }; </script> <style src="../gongyingshangxxweihu/gyscss/gys.css"> </style>
(3)修改router/index.js中的path和import('@/views/table/gathering') 其中path为访问路径，import为views文件夹中的table文件夹中的gathering.vue文件
{ path: '/vmodel', component: Layout, redirect: '/vmodel', meta: { title: '自定义组件', icon: 'el-icon-s-help' }, children: [ { path: 'vmodel', name: 'vmodel', component: () => import('@/views/vmodel/vmodel/index'), meta: { title: '模型自定义', icon: 'dashboard' } }, { path: 'vmodal', name: 'vmodal', component: () => import('@/views/vmodel/vmodal/index'), meta: { title: '模型自定义', icon: 'dashboard' } } ] }
(4)reload工程 ： npm run dev
(5)plus：如果此时你在开发者工具中能正常接收数据，但是无法显示，考虑easy-mock中的接口设置，返回值是否为20000等。
{ "code": 20000, "flag": true, "message": "@string", "data|10": [{ "id": "@string", "name": "@cword(8,12)", "summary": "@cword(20,40)", "detail": "@cword(20,40)", "sponsor": "@string", "image": "@image", "starttime": "@date", "endtime": "@date", "address": "@county(true)", "enrolltime": "@date", "state": "@string", "city": "@string" }] }
3.使用pagination实现分页
我们已经通过表格组件完成了列表的展示，接下来需要使用分页组件完成分页功能
一般对于分页，都需要前端传递给后端两个参数：①当前页码 ②每页显示条数
由于笔者项目中用到了Easy Mock，所以我们第一步应该修改Easy Mock中的接口，产生更真实的模拟数据
(1)修改接口/gathering/gathering/search/{page}/{size} method:POST
(2)在gathering.js中添加新方法search，page当前页码，size每页显示条数，searchMap查询条件
参考返回数据结构：
<script> import gatheringApi from '@/api/gathering' export default { data() { return { total: 0 , //总记录数 list: [], currentPage: 1, //初始值为1 pageSize: 10, //每页显示条数 searchMap: {} //查询条件 } }, created() { this.fetchData() }, methods: { fetchData() { gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => { this.list = response.data.rows this.total = response.data.total }) } } } </script>
此时js部分(逻辑处理层)我们已经完成，参考官方文档完成分页组件UI层：
plus：@代表调用的方法，当每页显示个数和当前页码改变时会调用方法fetchData，:name代表属性
<el-pagination @size-change="fetchData" @current-change="fetchData" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
plus：如果加入该<el-pagination>到<template>中报错，考虑在<template>下添加一个<div>标签，因为<template>下只能有一个标签加入后即只有一个<div>标签，否则将存在<el-table>标签和<el-pagination>标签，故报错。
4. 使用分页+条件查询
需求:在分页列表的基础上实现条件查询功能【使用到了表单控件、文本输入控件、日期输入控件、行内表单等】
总体template代码:
<template> <div> <br/> <el-form :inline="true"> <el-form-item label="活动名称"> <el-input v-model="searchMap.name"></el-input> </el-form-item> <el-form-item label="活动日期"> <el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="选择开始日期"> </el-date-picker> <el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="选择结束日期"> </el-date-picker> </el-form-item> <el-button @click="fetchData()" type="primary">查询</el-button> </el-form> ...... </div> </template>
5-6. 弹出窗口、消息提示、select下拉框
需求：界面中加入"新增"按钮，点击弹出编辑窗口，点击“修改”按钮，关闭窗口并刷新表格，弹出提示(成功或失败)
涉及知识点：dialog组件、$message、switch开关、textarea文本域、form表单、select下拉框等
参考官方文档：http://element-cn.eleme.io/#/zh-CN/component/dialog (如何调出窗口并关闭窗口)
plus：注意！需要在return内部声明一个实体对象，用于存储表单数据 ，如：renturn{ pojo:{} }
(省略了一部分代码)新增city.js，并导出(参考gathering.js)。在gathering.vue中导入city，并在打开视图时就加载城市：
created() { this.fetchData() cityApi.getList().then(response => { this.cityList = response.data }) }
不要忘记在return中加入city这个实体对象，否则为空报错。如return{ cityList:[] }
<template>视图层代码：
<!-- 创建 --> <el-dialog :title="title" :visible.sync="open2"> <el-form ref="form2" :model="form2" label-width="45%" :rules="rules" class="chuangjianform"> <el-row> <el-col :span="11"> <el-form-item label="公司名称" prop="name"> <el-input v-model="form2.name" maxlength="30" placeholder="请输入名称" style="width:98%" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系人" prop="telPeople"> <el-input v-model="form2.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="公司地址" prop="address"> <el-input v-model="form2.address" placeholder="请输入公司地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="联系电话" prop="phone"> <el-input v-model="form2.phone" placeholder="请输入联系电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="出库顺序" prop="skuSort"> <el-input v-model="form2.skuSort" placeholder="请输入出库顺序" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票账号" prop="invoiceNumber"> <el-input v-model="form2.invoiceNumber" placeholder="请输入发票账号" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票地址" prop="invoiceAddress"> <el-input v-model="form2.invoiceAddress" placeholder="请输入发票地址" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票电话" prop="invoicePhone"> <el-input v-model="form2.invoicePhone" placeholder="请输入发票电话" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="发票类型" prop="invoiceType"> <!-- <el-input v-model="form2.invoiceType" placeholder="请输入发票类型" maxlength="30" /> --> <el-select v-model="form2.invoiceType" placeholder="请输入发票类型"> <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="发票开户行" prop="invoiceBank"> <el-input v-model="form2.invoiceBank" placeholder="请输入发票开户行" maxlength="30" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber"> <el-input v-model="form2.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" /> </el-form-item> </el-col> <el-col :span="11"> <el-form-item label="状态" prop="ifEnabled"> <!-- <el-input v-model="form2.ifEnabled" placeholder="请输入状态" maxlength="30" /> --> <el-select v-model="form2.ifEnabled" placeholder="请输入状态"> <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleAdd">确定</el-button> <!-- <el-button @click="cancel">取 消</el-button> --> </div> </el-dialog>
当我们点击保存按钮的时候，则触发几个动作：①弹出消息提示框(消息内容来自于响应体中的message) ②判断消息状态是否为true，为true则刷新列表(调用之前的刷新列表方法) ③关闭窗口(设置dialogVisible = false)，主要代码如下：
<template> ... <el-form-item> <el-button type="primary" @click="handlerSave()">保存</el-button> <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button> </el-form-item> ... </template> <script> ... methods:{ handlerSave(){ gatheringApi.save(this.pojo).then(response => { alert(response.message) if(response.flag){ //如果成功 this.fetchData(); //刷新列表 } }) this.dialogFormVisible=false //关闭窗口 } } ... </script>
7、在列表显示页面右侧执行修改操作
需求：在表格的操作列增加"修改"按钮，点击修改按钮弹出窗口并显示数据，点击保存按钮保存 修改并刷新表格。
需求分析：在点击修改按钮时候，首先需要打开窗口(修改dialogVisible = true)，其次获取点击的数据行id，根据该id查询数据并回显，在点击保存按钮时候，执行上面所讲的保存操作。
由于我们使用Easy-Mock模拟数据，我们首先需要修改根据id查询数据的接口
(1)修改easymock接口/gathering/gathering/{id} (GET)
(2)修改src/api/gathering.js，增加方法定义
findById(id) { return request({ url: `/gathering/gathering/${id}`, method: 'get' }) }
(3)修改src/views/table/gathering.vue的js脚本部分,新增handleEdit()方法
handleEdit(id){ this.dialogFormVisible=true //打开窗口 gatheringApi.findById(id).then(response=>{ if(response.flag){ this.pojo=response.data } }) }
(4)在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法
<el-table-column label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button> </template> </el-table-column>
fixed="right"的作用是定义此列为右固定列slot-scope用于指定当前行的上下文。
使用scope.row可以获取行对象，此处我们需要获得当前行的id，故使用scope.row.id
