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 @@ ...@@ -136,7 +136,7 @@
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #b70b30; background: #4583F3;
/* Old browsers */ /* Old browsers */
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
......
package-lock.json
...@@ -1634,7 +1634,7 @@ ...@@ -1634,7 +1634,7 @@
}, },
"cfb": { "cfb": {
"version": "1.1.4", "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=", "integrity": "sha1-gf017eTJGdjwliqUWC4d+vcFHio=",
"requires": { "requires": {
"adler-32": "~1.2.0", "adler-32": "~1.2.0",
...@@ -1645,7 +1645,7 @@ ...@@ -1645,7 +1645,7 @@
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.20.3", "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=" "integrity": "sha1-/UhehMA+tIgcIHIrpIA16FMa6zM="
} }
} }
...@@ -1877,7 +1877,7 @@ ...@@ -1877,7 +1877,7 @@
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.14.1", "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=" "integrity": "sha1-IjUSPjevjKPGXfRbAm29NXsBuao="
} }
} }
...@@ -10486,7 +10486,7 @@ ...@@ -10486,7 +10486,7 @@
}, },
"ssf": { "ssf": {
"version": "0.10.3", "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=", "integrity": "sha1-jq4fwpyQpVLnkhII+BiS1vd6yys=",
"requires": { "requires": {
"frac": "~1.1.2" "frac": "~1.1.2"
...@@ -12112,7 +12112,7 @@ ...@@ -12112,7 +12112,7 @@
}, },
"xlsx": { "xlsx": {
"version": "0.15.6", "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=", "integrity": "sha1-Rh+EHW2eoag3XizSRr8jrs4IodU=",
"requires": { "requires": {
"adler-32": "~1.2.0", "adler-32": "~1.2.0",
...@@ -12127,7 +12127,7 @@ ...@@ -12127,7 +12127,7 @@
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "2.17.1", "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=" "integrity": "sha1-vXerfebelCBc6sxy8XFtKfIKd78="
} }
} }
......
src/api/inventory.js
...@@ -82,7 +82,7 @@ export function getGoodsList(params) { ...@@ -82,7 +82,7 @@ export function getGoodsList(params) {
params params
}) })
} }
// 万科后台_物品插入操作 // 万科后台_物品插入操作(单条)
export function addGoods(params) { export function addGoods(params) {
return request({ return request({
url: 'vankeGoods/insertGoods', url: 'vankeGoods/insertGoods',
...@@ -90,3 +90,11 @@ export function addGoods(params) { ...@@ -90,3 +90,11 @@ export function addGoods(params) {
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> <?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 \ 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' ...@@ -3,7 +3,6 @@ import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import ElementUI from 'element-ui' 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 locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import VCharts from 'v-charts' import VCharts from 'v-charts'
......
src/styles/index.scss
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
@import "./transition.scss"; @import "./transition.scss";
@import "./element-ui.scss"; @import "./element-ui.scss";
@import "./sidebar.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 { body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
......
src/views/home/index.vue
...@@ -308,7 +308,7 @@ export default { ...@@ -308,7 +308,7 @@ export default {
} }
.total-icon { .total-icon {
color: #409eff; color: #4583F3;
width: 60px !important; width: 60px !important;
height: 60px !important; height: 60px !important;
} }
......
src/views/inv/StoreList.vue
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</el-table-column> </el-table-column>
<el-table-column label="型号" <el-table-column label="型号"
align="center"> align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{scope.row.goodsNo}}</template>
</el-table-column> </el-table-column>
<el-table-column label="物品类别" <el-table-column label="物品类别"
align="center"> align="center">
......
src/views/inv/modules/addGoodsModal.vue
...@@ -2,48 +2,63 @@ ...@@ -2,48 +2,63 @@
<el-dialog :visible.sync="visible" <el-dialog :visible.sync="visible"
:title="title" :title="title"
center center
width="900px"> width="1000px">
<!-- start --> <!-- start -->
<el-row style="padding: 10px 0;text-align: left;"> <el-row style="padding: 10px 0;text-align: left;">
<el-button type="primary" size="medium" @click="handleAdd">新增</el-button> <el-button type="primary" size="medium" @click="handleAdd">新增</el-button>
</el-row> </el-row>
<div class="scroll-container no-bottom" <div class="scroll-container no-bottom"
ref="scrollContainer"> ref="scrollContainer">
<el-form :model="formData" ref="formData">
<el-table <el-table
:data="tableData" :data="formData.tableData"
style="width: 100%" style="width: 100%"
@row-dblclick="dbclick"> @row-dblclick="dbclick">
<el-table-column prop="name" label="物品名称"> <el-table-column prop="name" label="物品名称">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row"> <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.name'"
<el-form-item size="mini" prop="name" :rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
:rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]"> <el-autocomplete
<el-input v-if="scope.row.isOK" v-model="scope.row.name" class="input-width" class="input-width"
placeholder="物品名称"></el-input> 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> <span v-else>{{scope.row.name}}</span>
</el-form-item> </el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="型号"> <el-table-column label="型号">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row"> <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNo'" :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
<el-form-item size="mini" prop="goodsNo" :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNo" class="input-width" <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> <span v-else>{{scope.row.goodsNo}}</span>
</el-form-item> </el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="物品类别"> <el-table-column label="条形码">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row"> <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.barCode'" :rules="[{required: true,trigger: 'blur',message: '条形码不能为空'}]">
<el-form-item size="mini" prop="goodsCategoryId" :rules="[{required: true,trigger: 'change',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" <el-select v-if="scope.row.isOK" v-model="scope.row.goodsCategoryId"
class="input-width" class="input-width"
clearable clearable
placeholder="物品类别"> placeholder="物品类别"
:disabled="scope.row.id? true: false">
<el-option v-for="item in categoryOptions" <el-option v-for="item in categoryOptions"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
...@@ -51,38 +66,36 @@ ...@@ -51,38 +66,36 @@
</el-select> </el-select>
<span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span> <span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span>
</el-form-item> </el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="数量"> <el-table-column label="数量">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row" > <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNum'" :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
<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"
<el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width" placeholder="数量"></el-input> placeholder="数量"></el-input>
<span v-else>{{scope.row.goodsNum}}</span> <span v-else>{{scope.row.goodsNum}}</span>
</el-form-item> </el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="价格（元）"> <el-table-column label="价格（元）">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row"> <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.prict'" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
<el-form-item size="mini" prop="prict" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
<el-input v-if="scope.row.isOK" v-model="scope.row.prict" class="input-width" <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> <span v-else>{{scope.row.prict}}</span>
</el-form-item> </el-form-item>
</el-form>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="name" label="供应商"> <el-table-column label="供应商">
<template slot-scope="scope"> <template slot-scope="scope">
<el-form :model="scope.row"> <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.supplierId'"
<el-form-item size="mini" prop="supplierId" :rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]" > :rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]">
<el-select v-if="scope.row.isOK" v-model="scope.row.supplierId" <el-select v-if="scope.row.isOK" v-model="scope.row.supplierId"
class="input-width" class="input-width"
clearable clearable
placeholder="供应商"> placeholder="供应商"
:disabled="scope.row.id? true: false">
<el-option v-for="item in supplierOptions" <el-option v-for="item in supplierOptions"
:key="item.id" :key="item.id"
:label="item.supplierName" :label="item.supplierName"
...@@ -90,21 +103,40 @@ ...@@ -90,21 +103,40 @@
</el-select> </el-select>
<span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span> <span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span>
</el-form-item> </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> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" <el-table-column label="操作"
align="center" align="center"
width="100"> width="50">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-form>
</div> </div>
<div slot="footer"> <div slot="footer">
<el-button type="primary" <el-button type="primary"
@click="submit">确认 @click="submit('formData')">确认
</el-button> </el-button>
<el-button <el-button
@click="close">返回 @click="close">返回
...@@ -114,7 +146,7 @@ ...@@ -114,7 +146,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { getGoodsCategoryList,addGoods} from '@/api/inventory' import { getGoodsCategoryList, addGoodList, getStockRooms, getGoodsList } from '@/api/inventory'
import { getSuppliersList } from '@/api/supplier' import { getSuppliersList } from '@/api/supplier'
// 添加编辑属性 // 添加编辑属性
...@@ -125,9 +157,13 @@ export default { ...@@ -125,9 +157,13 @@ export default {
visible: false, visible: false,
title: null, title: null,
loading: false, loading: false,
tableData: [], formData: {
tableData: [],
},
categoryOptions: [], categoryOptions: [],
supplierOptions: [] supplierOptions: [],
depotOptions: [],
goodsList: []
} }
}, },
methods: { methods: {
...@@ -143,68 +179,123 @@ export default { ...@@ -143,68 +179,123 @@ export default {
this.supplierOptions = res.data.list 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() { init() {
this.getGoodsList()
this.getGoodsCategoryList() this.getGoodsCategoryList()
this.getSuppliersList() this.getSuppliersList()
this.tableData = [] this.getStockRooms()
this.formData.tableData = []
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.scrollContainer.scrollTop = 0 this.$refs.scrollContainer.scrollTop = 0
}) })
}, },
add() { add() {
this.visible = true
this.title = '新增物品'
this.init() this.init()
this.title = '新增物品'
this.visible = true
}, },
close() { close() {
this.visible = false this.visible = false
}, },
handleAdd() { handleAdd() {
for(var i of this.tableData){ for (var i of this.formData.tableData) {
i.isOK = false i.isOK = false
} }
this.tableData.push({ this.formData.tableData.push({
name: '', name: '',
goodsNo: '', goodsNo: '',
goodsNum: '', goodsNum: '',
prict: '', prict: '',
supplierId: '', supplierId: '',
goodsCategoryId: '', goodsCategoryId: '',
stockRoomId: '',
barCode: '',
isOK: true isOK: true
},) },)
}, },
dbclick(row, event, column) { dbclick(row, event, column) {
for(var i of this.tableData){ for (var i of this.tableData) {
i.isOK = false i.isOK = false
} }
console.log(row, event, column)
row.isOK = !row.isOK row.isOK = !row.isOK
}, },
submit() { submit(formName) {
addGoods(this.tableData).then(res=>{ // if (!this.formData.tableData.length || !this.formData.tableData[0].name) {
this.$emit('ok') // this.$message.warning('请添加物品')
this.visible = false // 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){ handleDelete(index) {
this.tableData.splice(index,1) this.formData.tableData.splice(index, 1)
}, },
// 获取名称 // 获取名称
getName(id,arr,type){ getName(id, arr, type) {
if(!id){ if (!id) {
return '' return ''
} }
console.log('arr',id, arr)
let name = null let name = null
if(type){ console.log('arr,id',arr,id)
name = arr.filter(item=>item.id == id)[0].supplierName if (type) {
}else { name = arr.filter(item => item.id == id)[0].supplierName
name= arr.filter(item=>item.id == id)[0].name } else {
name = arr.filter(item => item.id == id)[0].name
} }
return 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 { ...@@ -217,11 +308,11 @@ export default {
} }
.input-width { .input-width {
width: 110px; width: 100px;
} }
</style> </style>
<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; margin-bottom: 0;
} }
</style> </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> <template>
<div class="footer"> <div class="footer">
<el-link>如遇问题请联系我们</el-link> <el-link style="color: #fff;">如遇问题请联系我们</el-link>
<div>Copyright © 2020 Powered By 泉州六方网络科技有限公司</div> <div>Copyright © 2020 Powered By 泉州六方网络科技有限公司</div>
</div> </div>
</template> </template>
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
justify-content: center; justify-content: center;
height: 88px; height: 88px;
padding: 0 20px; padding: 0 20px;
color: #999; color: #FFFFFF;
font-size: 14px; font-size: 14px;
} }
......
src/views/login/forgetPwd.vue
<template> <template>
<div class="page">
<top-nav />
<div class="container"> <div class="container">
<el-card class="password-form-layout"> <div class="content">
<div class="password-title">找回密码（1/2）</div> <img class="logo"
<el-form> src="@/assets/images/ic_logo.png"/>
<el-form-item prop="username"> <el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
<el-input type="text" <el-col :span="12">
placeholder="请输入登录手机号"> <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"> <span slot="prefix">
<i class="el-icon-user" /> <i class="el-icon-user" />
<el-divider direction="vertical"></el-divider>
</span> </span>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input type="text" <el-input type="text"
placeholder="请输入短信验证码"> placeholder="请输入短信验证码">
<span slot="prefix"> <span slot="prefix">
<i class="el-icon-mobile-phone" /> <i class="el-icon-mobile-phone" />
<el-divider direction="vertical"></el-divider>
</span> </span>
<span slot="suffix"> <span slot="suffix">
<el-button type="danger" <el-button type="primary"
size="mini">发送短信</el-button> size="mini">发送短信</el-button>
</span> </span>
</el-input> </el-input>
</el-form-item> <div class="row">
<el-form-item> <el-link style="color:#C5CDD3;" @click="goLogin">立即登录</el-link>
<el-button type="danger" </div>
style="width: 100%;" </el-form-item>
:loading="loading" <el-form-item>
@click.native.prevent="resetPassword">重设密码</el-button> <el-button type="primary"
</el-form-item> style="width: 100%;border-radius: 20px;"
<el-link @click="goLogin">立即登录</el-link> :loading="loading"
</el-form> @click.native.prevent="resetPassword">重设密码</el-button>
</el-card> </el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</div>
<bottom-footer />
</div> </div>
<bottom-footer />
</div>
</template> </template>
<script> <script>
...@@ -73,24 +84,52 @@ export default { ...@@ -73,24 +84,52 @@ export default {
<style scoped> <style scoped>
.container { .container {
position: relative; position: relative;
height: calc(100vh - 196px); width: 100%;
min-height: 36.5vw; height: 100%;
background-color: #b70b30;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
justify-content: 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 { .password-form-layout {
width: 320px; z-index: 9;
padding: 20px;
} }
.password-title { .password-title {
color: #e12d1a; color: #AFB0B3;
font-size: 17px; font-size: 25px;
font-weight: bold; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -98,3 +137,10 @@ export default { ...@@ -98,3 +137,10 @@ export default {
margin: 0; margin: 0;
} }
</style> </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> <template>
<div> <div class="container">
<top-nav/> <div class="content">
<div class="container"> <img class="logo"
<img class="bg-img" src="@/assets/images/ic_logo.png"/>
src="@/assets/images/bg_login.png"/> <el-row :gutter="20" type="flex" justify="space-between" align="middle" class="my-form">
<el-card class="login-form-layout"> <el-col :span="12">
<div class="login-title">账号登录</div> <img class="bg-img"
<el-form autoComplete="on" src="@/assets/images/Diagram.png"/>
:model="loginForm" </el-col>
:rules="loginRules" <el-col :span="9">
ref="loginForm" <div class="login-form-layout">
label-position="left"> <div class="login-title">账号登录</div>
<el-form-item prop="username"> <el-form autoComplete="on"
<el-input name="username" :model="loginForm"
type="text" :rules="loginRules"
v-model="loginForm.username" ref="loginForm"
autoComplete="on" label-position="left">
placeholder="请输入用户名"> <el-form-item prop="username">
<el-input name="username"
type="text"
v-model="loginForm.username"
autoComplete="on"
placeholder="请输入用户名">
<span slot="prefix"> <span slot="prefix">
<i class="el-icon-user-solid"/> <i class="el-icon-user-solid"/>
<el-divider direction="vertical"></el-divider>
</span> </span>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input name="password" <el-input name="password"
:type="pwdType" :type="pwdType"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
v-model="loginForm.password" v-model="loginForm.password"
autoComplete="on" autoComplete="on"
placeholder="请输入密码"> placeholder="请输入密码">
<span slot="prefix"> <span slot="prefix">
<svg-icon style="width: 14px;" <svg-icon style="width: 15px;"
icon-class="password"></svg-icon> icon-class="password"></svg-icon>
<el-divider direction="vertical"></el-divider>
</span> </span>
<!-- <span slot="suffix" <!-- <span slot="suffix"
@click="showPwd"> @click="showPwd">
<svg-icon icon-class="eye"></svg-icon> <svg-icon icon-class="eye"></svg-icon>
</span> --> </span> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-row type="flex" justify="space-between">
<el-col :span="15">
<el-form-item prop="VerificationCode">        <el-form-item prop="VerificationCode">       
<el-input type="text" v-model="loginForm.authCode" auto-complete="off" <el-input type="text" v-model="loginForm.authCode" autoComplete="on"
placeholder="请输入验证码"></el-input>      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-form-item>
</el-col> <div class="row">
<el-col :span="9" v-if="captchaImage" style="text-align: right;" > <p @click="forgetPwd">忘记密码</p>
<img style="width:100px; padding: 8px;border: 1px solid #DCDFE6;border-radius: 4px;" :src="captchaImage" alt="" @click="refreshCode"> </div>
</el-col> <el-form-item>
</el-row> <el-button type="primary"
<el-form-item> style="width: 100%;border-radius: 20px;"
<el-button type="danger" :loading="loading"
style="width: 100%;" @click.native.prevent="handleLogin">登录
:loading="loading" </el-button>
@click.native.prevent="handleLogin">登录 </el-form-item>
</el-button> </el-form>
</el-form-item> </div>
<el-link @click="forgetPwd">忘记密码</el-link> </el-col>
</el-form> </el-row>
</el-card>
</div> </div>
<bottom-footer/> <bottom-footer/>
</div> </div>
...@@ -69,7 +78,7 @@ ...@@ -69,7 +78,7 @@
<script> <script>
import { setSupport, getSupport, setCookie, getCookie } from '@/utils/support' import { setSupport, getSupport, setCookie, getCookie } from '@/utils/support'
import {getCaptchaImage} from '@/api/login' import { getCaptchaImage } from '@/api/login'
import TopNav from './components/TopNav' import TopNav from './components/TopNav'
import BottomFooter from './components/BottomFooter' import BottomFooter from './components/BottomFooter'
...@@ -177,34 +186,53 @@ export default { ...@@ -177,34 +186,53 @@ export default {
<style scoped> <style scoped>
.container { .container {
position: relative; position: relative;
height: calc(100vh - 196px); width: 100%;
min-height: 36.5vw; height: 100%;
background-color: #b70b30;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; 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 { .container .content {
position: absolute; width: 60%;
z-index: 0; padding: 3%;
left: 4.5vw; height: 70%;
bottom: 0; background: #FFFFFF;
height: 32.87vw; 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 { .login-form-layout {
width: 370px;
padding: 20px;
z-index: 9; z-index: 9;
margin-right: 12.87vw;
} }
.login-title { .login-title {
color: #e12d1a; color: #AFB0B3;
font-size: 17px; font-size: 25px;
font-weight: bold; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -212,3 +240,10 @@ export default { ...@@ -212,3 +240,10 @@ export default {
margin: 0; margin: 0;
} }
</style> </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