Skip to content

M
manage
Commit d72fc9d9 by wangyalan-git
Options

登录页，忘记密码页样式调整，新增物品，物品查询

parent cc3370a8
Showing with 774 additions and 191 deletions
index.html
......@@ -136,7 +136,7 @@
top: 0;
width: 51%;
height: 100%;
background: #b70b30;
background: #4583F3;
/* Old browsers */
z-index: 1000;
-webkit-transform: translateX(0);
......
package-lock.json
......@@ -1634,7 +1634,7 @@
},
"cfb": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/cfb/download/cfb-1.1.4.tgz",
"resolved": "https://registry.npm.taobao.org/cfb/download/cfb-1.1.4.tgz?cache=0&sync_timestamp=1584079355027&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcfb%2Fdownload%2Fcfb-1.1.4.tgz",
"integrity": "sha1-gf017eTJGdjwliqUWC4d+vcFHio=",
"requires": {
"adler-32": "~1.2.0",
......@@ -1645,7 +1645,7 @@
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.3.tgz?cache=0&sync_timestamp=1584148356834&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.3.tgz",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.3.tgz",
"integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
}
}
......@@ -1877,7 +1877,7 @@
"dependencies": {
"commander": {
"version": "2.14.1",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.14.1.tgz?cache=0&sync_timestamp=1584148356834&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.14.1.tgz",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.14.1.tgz",
"integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao="
}
}
......@@ -10486,7 +10486,7 @@
},
"ssf": {
"version": "0.10.3",
"resolved": "https://registry.npm.taobao.org/ssf/download/ssf-0.10.3.tgz",
"resolved": "https://registry.npm.taobao.org/ssf/download/ssf-0.10.3.tgz?cache=0&sync_timestamp=1592373934925&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssf%2Fdownload%2Fssf-0.10.3.tgz",
"integrity": "sha1-jq4fwpyQpVLnkhII+BiS1vd6yys=",
"requires": {
"frac": "~1.1.2"
......@@ -12112,7 +12112,7 @@
},
"xlsx": {
"version": "0.15.6",
"resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.15.6.tgz?cache=0&sync_timestamp=1584260249027&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fxlsx%2Fdownload%2Fxlsx-0.15.6.tgz",
"resolved": "https://registry.npm.taobao.org/xlsx/download/xlsx-0.15.6.tgz",
"integrity": "sha1-Rh+EHW2eoag3XizSRr8jrs4IodU=",
"requires": {
"adler-32": "~1.2.0",
......@@ -12127,7 +12127,7 @@
"dependencies": {
"commander": {
"version": "2.17.1",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1584148356834&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz",
"integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78="
}
}
......
src/api/inventory.js
......@@ -82,7 +82,7 @@ export function getGoodsList(params) {
params
})
}
// 万科后台_物品插入操作
// 万科后台_物品插入操作(单条)
export function addGoods(params) {
return request({
url: 'vankeGoods/insertGoods',
......@@ -90,3 +90,11 @@ export function addGoods(params) {
params
})
}
// 万科后台_插入多条物品信息
export function addGoodList(data) {
return request({
url: 'vankeGoods/insertVankeGoodsList',
method: 'post',
data
})
}
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png

39.2 KB | W: | H:

src/assets/images/ic_logo.png

9.44 KB | W: | H:

src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
  • 2-up
  • Swipe
  • Onion skin
src/icons/svg/password.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592968029950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4682" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M825.611627 483.411895 392.464533 483.411895 392.464533 311.327608c0-75.091232 61.095473-136.186705 136.186705-136.186705 75.096349 0 136.192845 61.095473 136.192845 136.186705 0 25.822109 20.935822 46.75793 46.75793 46.75793 25.822109 0 46.75793-20.935822 46.75793-46.75793 0-126.660748-103.047957-229.702566-229.708705-229.702566S298.948673 184.66686 298.948673 311.327608l0 172.084287-67.25373 0c-25.716708 0-46.75793 21.041222-46.75793 46.75793l0 363.974665c0 25.716708 21.041222 46.75793 46.75793 46.75793l593.916684 0c25.716708 0 46.75793-21.041222 46.75793-46.75793L872.369557 530.168802C872.369557 504.452093 851.328335 483.411895 825.611627 483.411895zM567.353702 706.428178l0 87.700411c0 20.890796-17.093307 37.984103-37.984103 37.984103l-1.430582 0c-20.890796 0-37.984103-17.093307-37.984103-37.984103l0-87.701434c-18.328437-12.419867-30.375821-33.411971-30.375821-57.219189 0-38.149878 30.92636-69.076238 69.075215-69.076238 38.149878 0 69.076238 30.92636 69.076238 69.076238C597.730547 673.016207 585.68214 694.007287 567.353702 706.428178z" p-id="4683" data-spm-anchor-id="a313x.7781069.0.i5" fill="#D7DEE3" class="selected"></path></svg>
\ No newline at end of file
src/icons/svg/safe.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1592967924437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3545" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M845.824 220.34432c-10.07616-9.29792-23.26528-13.94688-36.39296-13.94688-1.55648 0-2.33472 0-3.87072 0-0.77824 0-9.29792 0.77824-22.46656 0.77824-22.46656 0-65.04448-1.55648-106.06592-11.61216-52.67456-12.36992-113.84832-70.4512-131.66592-82.08384-8.4992-5.4272-19.3536-8.51968-29.42976-8.51968-10.05568 0-20.11136 3.09248-29.40928 8.51968-2.31424 1.55648-65.80224 67.35872-127.75424 82.08384-41.04192 10.05568-85.17632 11.61216-106.84416 11.61216-13.94688 0-22.44608-0.77824-23.22432-0.77824-0.77824 0-2.33472 0-3.09248 0-13.94688 0-26.33728 4.64896-36.39296 13.94688-10.83392 9.29792-17.01888 23.22432-17.01888 37.1712l0 128.512c0 473.88672 321.31072 535.01952 334.47936 537.35424 3.09248 0.77824 6.20544 0.77824 9.27744 0.77824 3.09248 0 6.22592 0 9.3184-0.77824 13.9264-2.33472 336.7936-63.488 336.7936-537.35424l0-128.512C862.06464 243.56864 855.83872 229.64224 845.824 220.34432L845.824 220.34432zM726.56896 403.8656 504.34048 619.08992c-1.55648 2.33472-3.09248 4.66944-5.4272 6.22592-6.20544 6.18496-14.70464 9.27744-23.22432 9.27744-8.54016 0-17.03936-3.09248-24.00256-9.27744-1.55648-1.55648-3.85024-3.87072-4.64896-6.22592l-119.23456-115.36384c-12.3904-12.3904-12.3904-31.72352 0-44.11392 12.36992-12.41088 33.28-12.41088 45.6704 0l102.21568 98.32448 205.18912-198.20544c13.18912-12.3904 33.28-12.3904 45.6704 0C739.71712 371.34336 739.71712 391.4752 726.56896 403.8656L726.56896 403.8656z" p-id="3546" fill="#D7DEE3"></path></svg>
\ No newline at end of file
src/main.js
......@@ -3,7 +3,6 @@ import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts'
......
src/styles/index.scss
......@@ -3,6 +3,13 @@
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";
/* 改变主题色变量 */
$--color-primary: #4583F3;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
body {
-moz-osx-font-smoothing: grayscale;
......
src/views/home/index.vue
......@@ -308,7 +308,7 @@ export default {
}
.total-icon {
color: #409eff;
color: #4583F3;
width: 60px !important;
height: 60px !important;
}
......
src/views/inv/StoreList.vue
......@@ -81,7 +81,7 @@
</el-table-column>
<el-table-column label="型号"
align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
<template slot-scope="scope">{{scope.row.goodsNo}}</template>
</el-table-column>
<el-table-column label="物品类别"
align="center">
......
src/views/inv/modules/addGoodsModal.vue
......@@ -2,48 +2,63 @@
<el-dialog :visible.sync="visible"
:title="title"
center
width="900px">
width="1000px">
<!-- start -->
<el-row style="padding: 10px 0;text-align: left;">
<el-button type="primary" size="medium" @click="handleAdd">新增</el-button>
</el-row>
<div class="scroll-container no-bottom"
ref="scrollContainer">
<el-form :model="formData" ref="formData">
<el-table
:data="tableData"
:data="formData.tableData"
style="width: 100%"
@row-dblclick="dbclick">
<el-table-column prop="name" label="物品名称">
<el-table-column prop="name" label="物品名称">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini" prop="name"
:rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.name" class="input-width"
placeholder="物品名称"></el-input>
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.name'"
:rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
<el-autocomplete
class="input-width"
v-model="scope.row.name"
:fetch-suggestions="querySearch"
v-if="scope.row.isOK"
placeholder="物品名称"
@select="handleSelect(scope.$index,scope.row)"
></el-autocomplete>
<span v-else>{{scope.row.name}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="型号">
<el-table-column label="型号">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini" prop="goodsNo" :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNo'" :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNo" class="input-width"
placeholder="型号"></el-input>
placeholder="型号"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.goodsNo}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="物品类别">
<el-table-column label="条形码">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini" prop="goodsCategoryId" :rules="[{required: true,trigger: 'change',message: '物品类别不能为空'}]">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.barCode'" :rules="[{required: true,trigger: 'blur',message: '条形码不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.barCode" class="input-width"
placeholder="条形码"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.barCode}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="物品类别">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsCategoryId'"
:rules="[{required: true,trigger: 'change',message: '物品类别不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.goodsCategoryId"
class="input-width"
clearable
placeholder="物品类别">
placeholder="物品类别"
:disabled="scope.row.id? true: false">
<el-option v-for="item in categoryOptions"
:key="item.id"
:label="item.name"
......@@ -51,38 +66,36 @@
</el-select>
<span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="数量">
<el-table-column label="数量">
<template slot-scope="scope">
<el-form :model="scope.row" >
<el-form-item size="mini" prop="goodsNum" :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width" placeholder="数量"></el-input>
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNum'" :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width"
placeholder="数量"></el-input>
<span v-else>{{scope.row.goodsNum}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="价格（元）">
<el-table-column label="价格（元）">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini" prop="prict" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.prict'" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.prict" class="input-width"
placeholder="价格"></el-input>
placeholder="价格"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.prict}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="供应商">
<el-table-column label="供应商">
<template slot-scope="scope">
<el-form :model="scope.row">
<el-form-item size="mini" prop="supplierId" :rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]" >
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.supplierId'"
:rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.supplierId"
class="input-width"
clearable
placeholder="供应商">
placeholder="供应商"
:disabled="scope.row.id? true: false">
<el-option v-for="item in supplierOptions"
:key="item.id"
:label="item.supplierName"
......@@ -90,21 +103,40 @@
</el-select>
<span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="库房">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.stockRoomId'"
:rules="[{required: true,trigger: 'change',message: '库房不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.stockRoomId"
class="input-width"
clearable
placeholder="库房"
:disabled="scope.row.id? true: false">
<el-option v-for="item in depotOptions"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
<span v-else>{{getName(scope.row.stockRoomId, depotOptions)}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作"
align="center"
width="100">
width="50">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
<el-link type="danger" :underline="false" @click="handleDelete(scope.$index)">删除</el-link>
<!-- <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<div slot="footer">
<el-button type="primary"
@click="submit">确认
@click="submit('formData')">确认
</el-button>
<el-button
@click="close">返回
......@@ -114,7 +146,7 @@
</el-dialog>
</template>
<script>
import { getGoodsCategoryList,addGoods} from '@/api/inventory'
import { getGoodsCategoryList, addGoodList, getStockRooms, getGoodsList } from '@/api/inventory'
import { getSuppliersList } from '@/api/supplier'
// 添加编辑属性
......@@ -125,9 +157,13 @@ export default {
visible: false,
title: null,
loading: false,
tableData: [],
formData: {
tableData: [],
},
categoryOptions: [],
supplierOptions: []
supplierOptions: [],
depotOptions: [],
goodsList: []
}
},
methods: {
......@@ -143,68 +179,123 @@ export default {
this.supplierOptions = res.data.list
})
},
// 库房
getStockRooms() {
getStockRooms().then(res => {
this.depotOptions = res.data.list
})
},
// 物品
getGoodsList() {
console.log(12121212)
getGoodsList().then(res => {
for (var i of res.data.list) {
i.value = i.name
}
this.goodsList = res.data.list
})
},
init() {
this.getGoodsList()
this.getGoodsCategoryList()
this.getSuppliersList()
this.tableData = []
this.getStockRooms()
this.formData.tableData = []
this.$nextTick(() => {
this.$refs.scrollContainer.scrollTop = 0
})
},
add() {
this.visible = true
this.title = '新增物品'
this.init()
this.title = '新增物品'
this.visible = true
},
close() {
this.visible = false
},
handleAdd() {
for(var i of this.tableData){
i.isOK = false
}
this.tableData.push({
for (var i of this.formData.tableData) {
i.isOK = false
}
this.formData.tableData.push({
name: '',
goodsNo: '',
goodsNum: '',
prict: '',
supplierId: '',
goodsCategoryId: '',
stockRoomId: '',
barCode: '',
isOK: true
},)
},
dbclick(row, event, column) {
for(var i of this.tableData){
for (var i of this.tableData) {
i.isOK = false
}
console.log(row, event, column)
row.isOK = !row.isOK
},
submit() {
addGoods(this.tableData).then(res=>{
this.$emit('ok')
this.visible = false
submit(formName) {
// if (!this.formData.tableData.length || !this.formData.tableData[0].name) {
// this.$message.warning('请添加物品')
// return
// }
this.$refs[formName].validate((valid) => {
if (valid) {
let data = this.formData.tableData
alert(JSON.stringify(data))
addGoodList({ vankeGoodsList: this.formData.tableData }).then(res => {
this.$emit('ok')
this.visible = false
})
}else {
this.$message.warning('请检查必填项')
}
})
},
// 删除
handleDelete(index){
this.tableData.splice(index,1)
handleDelete(index) {
this.formData.tableData.splice(index, 1)
},
// 获取名称
getName(id,arr,type){
if(!id){
getName(id, arr, type) {
if (!id) {
return ''
}
console.log('arr',id, arr)
let name = null
if(type){
name = arr.filter(item=>item.id == id)[0].supplierName
}else {
name= arr.filter(item=>item.id == id)[0].name
console.log('arr,id',arr,id)
if (type) {
name = arr.filter(item => item.id == id)[0].supplierName
} else {
name = arr.filter(item => item.id == id)[0].name
}
return name
},
querySearch(queryString, cb) {
var goodsList = this.goodsList
var results = queryString ? goodsList.filter(this.createFilter(queryString)) : goodsList
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
handleSelect(index, row) {
let item = this.goodsList.filter(good => good.name === row.name)[0]
this.formData.tableData[index].id = item.id
this.formData.tableData[index].goodsNo = item.goodsNo
this.formData.tableData[index].barCode = item.barCode
this.formData.tableData[index].stockRoomId = item.stockRoomId
this.formData.tableData[index].prict = item.prict
this.formData.tableData[index].supplierId = item.supplierId
this.formData.tableData[index].supplierId = item.supplierId
this.formData.tableData[index].goodsCategoryId = item.goodsCategoryId
console.log('item', item)
}
}
}
......@@ -217,11 +308,11 @@ export default {
}
.input-width {
width: 110px;
width: 100px;
}
</style>
<style>
.no-bottom .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
.no-bottom .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 0;
}
</style>
src/views/inv/modules/importGoodsModal.vue 0 → 100644
<template>
<el-dialog :visible.sync="visible"
:title="title"
center
width="1000px">
<!-- start -->
<el-row style="padding: 10px 0;text-align: left;">
<!-- excel表格上传 -->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
multiple
accept=".xlsx"
:on-exceed="exceed"
:limit="1"
:on-remove="remove"
:http-request="uploadFile"
>
<!-- <i class="el-icon-upload"></i>-->
<!-- <div class="el-upload__text">-->
<!-- 将文件拖到此处，或-->
<!-- <em>点击上传</em>-->
<!-- </div>-->
<el-button size="small" type="primary">点击上传</el-button>
<div class="el-upload__tip" slot="tip">1次只能上传1个xls文件，且不超过500kb</div>
</el-upload>
</el-row>
<div class="scroll-container no-bottom"
ref="scrollContainer">
<el-form :model="formData" ref="formData">
<el-table
:data="formData.tableData"
style="width: 100%"
@row-dblclick="dbclick">
<el-table-column prop="name" label="物品名称">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.name'"
:rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
<el-autocomplete
class="input-width"
v-model="scope.row.name"
:fetch-suggestions="querySearch"
v-if="scope.row.isOK"
placeholder="物品名称"
@select="handleSelect(scope.$index,scope.row)"
></el-autocomplete>
<span v-else>{{scope.row.name}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="型号">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNo'" :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNo" class="input-width"
placeholder="型号"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.goodsNo}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="条形码">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.barCode'" :rules="[{required: true,trigger: 'blur',message: '条形码不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.barCode" class="input-width"
placeholder="条形码"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.barCode}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="物品类别">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsCategoryId'"
:rules="[{required: true,trigger: 'change',message: '物品类别不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.goodsCategoryId"
class="input-width"
clearable
placeholder="物品类别"
:disabled="scope.row.id? true: false">
<el-option v-for="item in categoryOptions"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
<span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="数量">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNum'" :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width"
placeholder="数量"></el-input>
<span v-else>{{scope.row.goodsNum}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="价格（元）">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.prict'" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.prict" class="input-width"
placeholder="价格"
:disabled="scope.row.id? true: false"></el-input>
<span v-else>{{scope.row.prict}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="供应商">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.supplierId'"
:rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.supplierId"
class="input-width"
clearable
placeholder="供应商"
:disabled="scope.row.id? true: false">
<el-option v-for="item in supplierOptions"
:key="item.id"
:label="item.supplierName"
:value="item.id"></el-option>
</el-select>
<span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="库房">
<template slot-scope="scope">
<el-form-item size="mini" :prop="'tableData.' + scope.$index + '.stockRoomId'"
:rules="[{required: true,trigger: 'change',message: '库房不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.stockRoomId"
class="input-width"
clearable
placeholder="库房"
:disabled="scope.row.id? true: false">
<el-option v-for="item in depotOptions"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
<span v-else>{{getName(scope.row.stockRoomId, depotOptions)}}</span>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作"
align="center"
width="50">
<template slot-scope="scope">
<el-link type="danger" :underline="false" @click="handleDelete(scope.$index)">删除</el-link>
<!-- <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<div slot="footer">
<el-button type="primary"
@click="submit('formData')">确认
</el-button>
<el-button
@click="close">返回
</el-button>
</div>
<!-- end -->
</el-dialog>
</template>
<script>
import { getGoodsCategoryList, addGoodList, getStockRooms, getGoodsList } from '@/api/inventory'
import { getSuppliersList } from '@/api/supplier'
import XLSX from 'xlsx'
// 添加编辑属性
export default {
name: 'importGoodsModal',
data() {
return {
visible: false,
title: null,
loading: false,
formData: {
tableData: [],
},
categoryOptions: [],
supplierOptions: [],
depotOptions: [],
goodsList: []
}
},
methods: {
// 物品类别
getGoodsCategoryList() {
getGoodsCategoryList().then(res => {
this.categoryOptions = res.data.list
})
},
// 供应商
getSuppliersList() {
getSuppliersList().then(res => {
this.supplierOptions = res.data.list
})
},
// 库房
getStockRooms() {
getStockRooms().then(res => {
this.depotOptions = res.data.list
})
},
// 物品
getGoodsList() {
console.log(12121212)
getGoodsList().then(res => {
for (var i of res.data.list) {
i.value = i.name
}
this.goodsList = res.data.list
})
},
init() {
this.getGoodsList()
this.getGoodsCategoryList()
this.getSuppliersList()
this.getStockRooms()
this.formData.tableData = []
this.$nextTick(() => {
this.$refs.scrollContainer.scrollTop = 0
})
},
add() {
this.init()
this.title = '新增物品'
this.visible = true
},
close() {
this.visible = false
},
dbclick(row, event, column) {
for (var i of this.tableData) {
i.isOK = false
}
row.isOK = !row.isOK
},
submit(formName) {
// if (!this.formData.tableData.length || !this.formData.tableData[0].name) {
// this.$message.warning('请添加物品')
// return
// }
this.$refs[formName].validate((valid) => {
if (valid) {
let data = this.formData.tableData
alert(JSON.stringify(data))
addGoodList({ vankeGoodsList: this.formData.tableData }).then(res => {
this.$emit('ok')
this.visible = false
})
}else {
this.$message.warning('请检查必填项')
}
})
},
// 删除
handleDelete(index) {
this.formData.tableData.splice(index, 1)
},
// 获取名称
getName(id, arr, type) {
if (!id) {
return ''
}
let name = null
console.log('arr,id',arr,id)
if (type) {
name = arr.filter(item => item.id == id)[0].supplierName
} else {
name = arr.filter(item => item.id == id)[0].name
}
return name
},
querySearch(queryString, cb) {
var goodsList = this.goodsList
var results = queryString ? goodsList.filter(this.createFilter(queryString)) : goodsList
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
handleSelect(index, row) {
let item = this.goodsList.filter(good => good.name === row.name)[0]
this.formData.tableData[index].id = item.id
this.formData.tableData[index].goodsNo = item.goodsNo
this.formData.tableData[index].barCode = item.barCode
this.formData.tableData[index].stockRoomId = item.stockRoomId
this.formData.tableData[index].prict = item.prict
this.formData.tableData[index].supplierId = item.supplierId
this.formData.tableData[index].supplierId = item.supplierId
this.formData.tableData[index].goodsCategoryId = item.goodsCategoryId
console.log('item', item)
},
//解析excel
async uploadFile(params) {
const _file = params.file;
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: 'binary'
});
for (let sheet in workbook.Sheets) {
//循环读取每个文件
const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
//若当前sheet没有数据，则continue
if(sheetArray.length == 0){
continue;
}
console.log("读取文件");
console.log(sheetArray);
for(let item in sheetArray){
let rowTable = {};
//这里的rowTable的属性名注意要与上面表格的prop一致
//sheetArray的属性名与上传的表格的列名一致
rowTable.name = sheetArray[item].物品名称;
rowTable.goodsNo = sheetArray[item].型号;
let goodsCategoryName = sheetArray[item].物品类别;
rowTable.goodsNum = sheetArray[item].数量;
rowTable.prict = sheetArray[item].价格(元);
let supplierName =sheetArray[item].供应商;
rowTable.barCode = sheetArray[item].条形码;
let stockRoomName = sheetArray[item].库房
if(rowTable.name){
let isExist = this.goodsList.findIndex(item =>{item.name === rowTable.name})
isExist == -1 && (rowTable.id = null)
isExist != -1 && (rowTable.id = this.goodsList[isExist].id)
}
if(goodsCategoryName){
let isExist = this.goodsList.findIndex(item =>{item.name === goodsCategoryName})
isExist == -1 && (rowTable.goodsCategoryId = null)
isExist != -1 && (rowTable.goodsCategoryId = this.goodsList[isExist].id)
}
if(supplierName){
let isExist = this.goodsList.findIndex(item =>{item.supplierName === supplierName})
isExist == -1 && (rowTable.supplierId = null)
isExist != -1 && (rowTable.supplierId = this.goodsList[isExist].id)
}
if(stockRoomName){
let isExist = this.goodsList.findIndex(item =>{item.name === stockRoomName})
isExist == -1 && (rowTable.stockRoomId = null)
isExist != -1 && (rowTable.stockRoomId = this.goodsList[isExist].id)
}
this.formData.tableData.push(rowTable)
console.log('rowTable',rowTable, this.formData.tableData)
}
}
} catch (e) {
this.$message.warning('文件类型不正确！');
}
};
fileReader.readAsBinaryString(_file);
},
//上传1个以上文件时弹窗提示错误
exceed: function() {
this.$message.error("最多只能上传1个xls文件");
},
//删除文件
remove() {
this.formData.tableData = [];
}
}
}
</script>
<style scoped>
.scroll-container {
max-height: 50vh;
overflow: hidden;
overflow-y: auto;
}
.input-width {
width: 100px;
}
</style>
<style>
.no-bottom .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 0;
}
</style>
src/views/login/components/BottomFooter.vue
<template>
<div class="footer">
<el-link>如遇问题请联系我们</el-link>
<el-link style="color: #fff;">如遇问题请联系我们</el-link>
<div>Copyright © 2020 Powered By 泉州六方网络科技有限公司</div>
</div>
</template>
......@@ -21,7 +21,7 @@ export default {
justify-content: center;
height: 88px;
padding: 0 20px;
color: #999;
color: #FFFFFF;
font-size: 14px;
}
......
src/views/login/forgetPwd.vue
<template>
<div class="page">
<top-nav />
<div class="container">
<el-card class="password-form-layout">
<div class="password-title">找回密码（1/2）</div>
<el-form>
<el-form-item prop="username">
<el-input type="text"
placeholder="请输入登录手机号">
<div class="content">
<img class="logo"
src="@/assets/images/ic_logo.png"/>
<el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
<el-col :span="12">
<img class="bg-img"
src="@/assets/images/Diagram.png"/>
</el-col>
<el-col :span="9">
<div class="password-form-layout">
<div class="password-title">找回密码（1/2）</div>
<el-form>
<el-form-item prop="username">
<el-input type="text"
placeholder="请输入登录手机号">
<span slot="prefix">
<i class="el-icon-user" />
<el-divider direction="vertical"></el-divider>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="text"
placeholder="请输入短信验证码">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="text"
placeholder="请输入短信验证码">
<span slot="prefix">
<i class="el-icon-mobile-phone" />
<el-divider direction="vertical"></el-divider>
</span>
<span slot="suffix">
<el-button type="danger"
<span slot="suffix">
<el-button type="primary"
size="mini">发送短信</el-button>
</span>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="danger"
style="width: 100%;"
:loading="loading"
@click.native.prevent="resetPassword">重设密码</el-button>
</el-form-item>
<el-link @click="goLogin">立即登录</el-link>
</el-form>
</el-card>
</el-input>
<div class="row">
<el-link style="color:#C5CDD3;" @click="goLogin">立即登录</el-link>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary"
style="width: 100%;border-radius: 20px;"
:loading="loading"
@click.native.prevent="resetPassword">重设密码</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
<bottom-footer />
</div>
<bottom-footer />
</div>
</template>
<script>
......@@ -73,24 +84,52 @@ export default {
<style scoped>
.container {
position: relative;
height: calc(100vh - 196px);
min-height: 36.5vw;
background-color: #b70b30;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
justify-content: center;
background: url("~@/assets/images/bg.png") no-repeat;
background-size: 100% 100%;
}
.container .content {
width: 60%;
padding: 3%;
height: 70%;
background: #FFFFFF;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.content .bg-img {
width: 100%;
}
.row{
padding-bottom: 5px;
font-size:10px;
color: #C5CDD3;
}
.container .logo {
width: 12%;
}
.my-form {
padding-top: 5%;
flex: 1;
align-items: center;
}
.password-form-layout {
width: 320px;
padding: 20px;
z-index: 9;
}
.password-title {
color: #e12d1a;
font-size: 17px;
font-weight: bold;
color: #AFB0B3;
font-size: 25px;
text-align: center;
margin-bottom: 20px;
}
......@@ -98,3 +137,10 @@ export default {
margin: 0;
}
</style>
<style>
.password-form-layout .el-input__inner {
border: none;
border-bottom: 1px solid #cccccc;
border-radius: 0;
}
</style>
src/views/login/index.vue
<template>
<div>
<top-nav/>
<div class="container">
<img class="bg-img"
src="@/assets/images/bg_login.png"/>
<el-card class="login-form-layout">
<div class="login-title">账号登录</div>
<el-form autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left">
<el-form-item prop="username">
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<div class="container">
<div class="content">
<img class="logo"
src="@/assets/images/ic_logo.png"/>
<el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
<el-col :span="12">
<img class="bg-img"
src="@/assets/images/Diagram.png"/>
</el-col>
<el-col :span="9">
<div class="login-form-layout">
<div class="login-title">账号登录</div>
<el-form autoComplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left">
<el-form-item prop="username">
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<span slot="prefix">
<i class="el-icon-user-solid"/>
<el-divider direction="vertical"></el-divider>
</span>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autoComplete="on"
placeholder="请输入密码">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autoComplete="on"
placeholder="请输入密码">
<span slot="prefix">
<svg-icon style="width: 14px;"
<svg-icon style="width: 15px;"
icon-class="password"></svg-icon>
<el-divider direction="vertical"></el-divider>
</span>
<!-- <span slot="suffix"
@click="showPwd">
<svg-icon icon-class="eye"></svg-icon>
</span> -->
</el-input>
</el-form-item>
<el-row type="flex" justify="space-between">
<el-col :span="15">
<!-- <span slot="suffix"
@click="showPwd">
<svg-icon icon-class="eye"></svg-icon>
</span> -->
</el-input>
</el-form-item>
<el-form-item prop="VerificationCode">       
<el-input type="text" v-model="loginForm.authCode" auto-complete="off"
placeholder="请输入验证码"></el-input>     
<el-input type="text" v-model="loginForm.authCode" autoComplete="on"
placeholder="请输入验证码">
<span slot="prefix">
<svg-icon style="width: 15px;"
icon-class="safe"></svg-icon>
</span>
 
</el-input>
<img style="width:100px; padding: 8px;position: absolute;bottom: 10px;right: 10px;"
:src="captchaImage" alt="" @click="refreshCode"> 
</el-form-item>
</el-col>
<el-col :span="9" v-if="captchaImage" style="text-align: right;" >
<img style="width:100px; padding: 8px;border: 1px solid #DCDFE6;border-radius: 4px;" :src="captchaImage" alt="" @click="refreshCode">
</el-col>
</el-row>
<el-form-item>
<el-button type="danger"
style="width: 100%;"
:loading="loading"
@click.native.prevent="handleLogin">登录
</el-button>
</el-form-item>
<el-link @click="forgetPwd">忘记密码</el-link>
</el-form>
</el-card>
<div class="row">
<p @click="forgetPwd">忘记密码</p>
</div>
<el-form-item>
<el-button type="primary"
style="width: 100%;border-radius: 20px;"
:loading="loading"
@click.native.prevent="handleLogin">登录
</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
<bottom-footer/>
</div>
......@@ -69,7 +78,7 @@
<script>
import { setSupport, getSupport, setCookie, getCookie } from '@/utils/support'
import {getCaptchaImage} from '@/api/login'
import { getCaptchaImage } from '@/api/login'
import TopNav from './components/TopNav'
import BottomFooter from './components/BottomFooter'
......@@ -177,34 +186,53 @@ export default {
<style scoped>
.container {
position: relative;
height: calc(100vh - 196px);
min-height: 36.5vw;
background-color: #b70b30;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
justify-content: flex-end;
justify-content: center;
background: url("~@/assets/images/bg.png") no-repeat;
background-size: 100% 100%;
}
.container .bg-img {
position: absolute;
z-index: 0;
left: 4.5vw;
bottom: 0;
height: 32.87vw;
.container .content {
width: 60%;
padding: 3%;
height: 70%;
background: #FFFFFF;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.content .bg-img {
width: 100%;
}
.row{
padding-bottom: 5px;
font-size:10px;
color: #C5CDD3;
}
.container .logo {
width: 12%;
}
.my-form {
padding-top: 5%;
flex: 1;
align-items: center;
}
.login-form-layout {
width: 370px;
padding: 20px;
z-index: 9;
margin-right: 12.87vw;
}
.login-title {
color: #e12d1a;
font-size: 17px;
font-weight: bold;
color: #AFB0B3;
font-size: 25px;
text-align: center;
margin-bottom: 20px;
}
......@@ -212,3 +240,10 @@ export default {
margin: 0;
}
</style>
<style>
.login-form-layout .el-input__inner {
border: none;
border-bottom: 1px solid #cccccc;
border-radius: 0;
}
</style>
static/favicon.ico
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment