目录
1.1、搭建elementUI脚手架(vue-admin-template)
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下拉框等
参考官方文档：element-cn.eleme.io/#/zh-CN/com… (如何调出窗口并关闭窗口)
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
