update 数据字典 & add 料仓、设备类型

This commit is contained in:
lb 2023-01-30 16:46:18 +08:00
parent ff77ab8546
commit 508bc4e434
14 changed files with 687 additions and 410 deletions

View File

@ -38,7 +38,8 @@
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script> <script>
// window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am'; // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am';
window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tengyun
</script> </script>
<% } %> <% } %>
<!-- 集成测试环境 --> <!-- 集成测试环境 -->

View File

@ -76,6 +76,7 @@ export default {
} }
this.$http[!this.dataForm.id ? "post" : "put"](this.urlOptions.submitURL, this.dataForm) this.$http[!this.dataForm.id ? "post" : "put"](this.urlOptions.submitURL, this.dataForm)
.then(({ data: res }) => { .then(({ data: res }) => {
// console.log('[confirm] here...')
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg);
} }
@ -85,7 +86,7 @@ export default {
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.visible = false; this.visible = false;
this.$emit("refreshDataList"); this.$emit("successSubmit");
}, },
}); });
}) })

View File

@ -35,7 +35,7 @@ export default {
// 获取数据列表 // 获取数据列表
getDataList() { getDataList() {
this.dataListLoading = true; this.dataListLoading = true;
this.$http return this.$http
.get(this.urlOptions.getDataListURL, { .get(this.urlOptions.getDataListURL, {
params: this.listQuery, params: this.listQuery,
}) })
@ -103,7 +103,7 @@ export default {
this.$refs.addOrUpdate.init(val.data.id); this.$refs.addOrUpdate.init(val.data.id);
}); });
} else if (val.type === "delete") { } else if (val.type === "delete") {
this.deleteHandle(val.data.id,val.data.name) this.deleteHandle(val.data.id, val.data.name)
} }
}, },
// 删除 // 删除
@ -121,7 +121,10 @@ export default {
type: "success", type: "success",
duration: 1500, duration: 1500,
onClose: () => { onClose: () => {
this.getDataList(); this.getDataList().then(() => {
// 刷新本地缓存
this.refreshLocalstorage()
})
}, },
}); });
} else { } else {
@ -147,7 +150,7 @@ export default {
break; break;
default: default:
console.log(val) console.log(val)
} }
}, },
handleCancel() { handleCancel() {
this.$refs.addOrUpdate.formClear() this.$refs.addOrUpdate.formClear()
@ -157,9 +160,23 @@ export default {
handleConfirm() { handleConfirm() {
this.$refs.addOrUpdate.dataFormSubmit() this.$refs.addOrUpdate.dataFormSubmit()
}, },
refreshLocalstorage() {
// 刷新数据字典数据
this.$http("/sys/dict/type/all", { limit: 999, page: 1 }).then(({ data: res }) => {
// console.log("[dictData] loading...", res);
if (res.code === 0 && res.data) {
localStorage.setItem("dictList", JSON.stringify(res.data));
}
});
// end
},
successSubmit() { successSubmit() {
this.handleCancel() this.handleCancel()
this.getDataList() this.getDataList()
if (this.isDictTypePage || this.isDictValuePage) {
// 刷新本地缓存
this.refreshLocalstorage()
}
}, },
// 导出 // 导出
exportHandle(name) { exportHandle(name) {

View File

@ -21,4 +21,8 @@ export const pick = (obj, paths) => {
} }
}) })
return result return result
}
export const dictFind = (which) => {
return () => 1
} }

View File

@ -113,7 +113,7 @@ export default {
limit: this.size, limit: this.size,
}; };
if (!queryParams && this.listQueryExtra.length) { if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
this.listQueryExtra.map((name) => { this.listQueryExtra.map((name) => {
params[name] = ""; params[name] = "";
}); });

View File

@ -0,0 +1,107 @@
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import StatusComponent from "@/components/noTemplateComponents/statusComponent";
import request from "@/utils/request";
import { dictFind, timeFilter } from '@/utils/filters'
export default function () {
const tableProps = [
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "类型名称" },
{ prop: "code", label: "类型编码" },
{ prop: "description", label: "描述" },
{ prop: "remark", label: "备注" },
{
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: ["edit", { name: "delete", permission: "pms:equipmentType:delete" }],
},
];
const headFormFields = [
{
prop: 'key',
label: "类型名称",
input: true,
default: { value: "" },
bind: {
// placeholder: '请输入产线名称或编码'
placeholder: '请输入类型名称'
}
},
{
button: {
type: "primary",
name: "查询",
},
},
{
button: {
type: "primary",
name: "新增",
permission: "pms:equipmentType:save"
},
bind: {
plain: true,
}
},
];
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dialogJustFormConfigs = {
form: {
rows: [
[
{
input: true,
label: "类型名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入类型名称" },
},
{
input: true,
label: "类型编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入类型编码" },
},
],
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:equipmentType:update", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
};
// 备注:弹窗弹出的时间和网速有关......
return {
dialogConfigs: dialogJustFormConfigs,
tableConfig: {
table: null, // 此处可省略el-table 上的配置项
column: tableProps, // el-column-item 上的配置项
},
headFormConfigs: {
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
},
urls: {
base: "/pms/equipmentType",
page: "/pms/equipmentType/page",
// subase: '/pms/blenderStepParam',
// subpage: '/pms/blenderStepParam/page',
// more...
},
};
}

View File

@ -0,0 +1,32 @@
<template>
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" />
</template>
<script>
import initConfig from './config';
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
export default {
name: 'ProductionLineView',
components: { ListViewWithHead },
provide() {
return {
urls: this.allUrls
}
},
data() {
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
return {
tableConfig,
headFormConfigs,
allUrls: urls,
dialogConfigs,
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -0,0 +1,118 @@
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import StatusComponent from "@/components/noTemplateComponents/statusComponent";
import request from "@/utils/request";
import { dictFind } from '@/utils/filters'
export default function () {
const tableProps = [
{ prop: "name", label: "料仓名称" },
{ prop: "code", label: "料仓编码" },
{ prop: "typeDictValue", label: "料仓类型", filter: dictFind('料仓') },
{ prop: "status", label: "产线状态", subcomponent: StatusComponent }, // subcomponent
{ prop: "description", label: "描述" },
{ prop: "remark", label: "备注" },
{
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: ["edit", { name: "delete", permission: "pms:materialStorage:delete" }],
},
];
const headFormFields = [
{
prop: 'name',
label: "料仓名称",
input: true,
default: { value: "" },
bind: {
// placeholder: '请输入产线名称或编码'
placeholder: '请输入料仓名称'
}
},
{
button: {
type: "primary",
name: "查询",
},
},
{
button: {
type: "primary",
name: "新增",
permission: "pms:materialStorage:save"
},
bind: {
plain: true,
}
},
];
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dialogJustFormConfigs = {
form: {
rows: [
[
{
input: true,
label: "料仓名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入料仓名称" },
},
{
input: true,
label: "料仓编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入料仓编码" },
}, {
select: true,
label: "料仓类型",
prop: "typeDictValue",
// fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
options: [
{ label: '中间仓', value: 0 },
{ label: '日料仓', value: 1 },
],
rules: { required: true, message: "not empty", trigger: "change" },
},
],
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [
{ name: "add", label: "保存", type: "primary", permission: "pms:materialStorage:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:materialStorage:update", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
};
// 备注:弹窗弹出的时间和网速有关......
return {
dialogConfigs: dialogJustFormConfigs,
tableConfig: {
table: null, // 此处可省略el-table 上的配置项
column: tableProps, // el-column-item 上的配置项
},
headFormConfigs: {
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
},
urls: {
base: "/pms/materialStorage",
page: "/pms/materialStorage/page",
// subase: '/pms/blenderStepParam',
// subpage: '/pms/blenderStepParam/page',
// more...
},
};
}

View File

@ -0,0 +1,32 @@
<template>
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" :listQueryExtra="['name']" />
</template>
<script>
import initConfig from './config';
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
export default {
name: 'ProductionLineView',
components: { ListViewWithHead },
provide() {
return {
urls: this.allUrls
}
},
data() {
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
return {
tableConfig,
headFormConfigs,
allUrls: urls,
dialogConfigs,
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped></style>

View File

@ -133,7 +133,7 @@ export default {
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false
this.$emit('refreshDataList') this.$emit('successSubmit')
} }
}) })
}).catch(() => {}) }).catch(() => {})

View File

@ -77,6 +77,7 @@ export default {
mixins: [basicPage], mixins: [basicPage],
data() { data() {
return { return {
isDictValuePage: true,
urlOptions: { urlOptions: {
getDataListURL: "/sys/dict/data/page", getDataListURL: "/sys/dict/data/page",
deleteURL: "/sys/dict/data", deleteURL: "/sys/dict/data",

View File

@ -90,7 +90,7 @@ export default {
duration: 500, duration: 500,
onClose: () => { onClose: () => {
this.visible = false this.visible = false
this.$emit('refreshDataList') this.$emit('successSubmit')
} }
}) })
}).catch(() => {}) }).catch(() => {})

View File

@ -2,33 +2,16 @@
<el-card shadow="never" class="aui-card--fill"> <el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__user"> <div class="mod-sys__user">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table <base-table :table-props="tableProps" :page="listQuery.page" :limit="listQuery.limit" :table-data="tableData">
:table-props="tableProps" <method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn" @clickBtn="handleClick" />
:page="listQuery.page"
:limit="listQuery.limit"
:table-data="tableData"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table> </base-table>
<pagination <pagination :limit.sync="listQuery.limit" :page.sync="listQuery.page" :total="listQuery.total" @pagination="getDataList" />
:limit.sync="listQuery.limit"
:page.sync="listQuery.page"
:total="listQuery.total"
@pagination="getDataList"
/>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<base-dialog <base-dialog
:dialogTitle="addOrEditTitle" :dialogTitle="addOrEditTitle"
:dialogVisible="addOrUpdateVisible" :dialogVisible="addOrUpdateVisible"
@cancel="handleCancel" @cancel="handleCancel"
@confirm="handleConfirm" @confirm="handleConfirmEx"
:before-close="handleCancel" :before-close="handleCancel"
> >
<add-or-update ref="addOrUpdate" @successSubmit="successSubmit"></add-or-update> <add-or-update ref="addOrUpdate" @successSubmit="successSubmit"></add-or-update>
@ -39,8 +22,8 @@
<script> <script>
import basicPage from "@/mixins/basic-page"; import basicPage from "@/mixins/basic-page";
import AddOrUpdate from './dict-type-add-or-update' import AddOrUpdate from "./dict-type-add-or-update";
import toDictType from './dict-type-to' import toDictType from "./dict-type-to";
import i18n from "@/i18n"; import i18n from "@/i18n";
const tableProps = [ const tableProps = [
{ {
@ -50,7 +33,7 @@ const tableProps = [
{ {
prop: "dictType", prop: "dictType",
label: i18n.t("dict.dictType"), label: i18n.t("dict.dictType"),
subcomponent: toDictType subcomponent: toDictType,
}, },
{ {
prop: "sort", prop: "sort",
@ -79,6 +62,7 @@ export default {
mixins: [basicPage], mixins: [basicPage],
data() { data() {
return { return {
isDictTypePage: true,
urlOptions: { urlOptions: {
getDataListURL: "/sys/dict/type/page", getDataListURL: "/sys/dict/type/page",
deleteURL: "/sys/dict/type", deleteURL: "/sys/dict/type",
@ -117,7 +101,7 @@ export default {
components: { components: {
AddOrUpdate, AddOrUpdate,
}, },
methods:{ methods: {
//search-bar //search-bar
buttonClick(val) { buttonClick(val) {
switch (val.btnName) { switch (val.btnName) {
@ -128,14 +112,18 @@ export default {
this.getDataList(); this.getDataList();
break; break;
case "add": case "add":
this.addOrEditTitle = '新增' this.addOrEditTitle = "新增";
this.addOrUpdateVisible = true; this.addOrUpdateVisible = true;
this.addOrUpdateHandle() this.addOrUpdateHandle();
break; break;
default: default:
console.log(val) console.log(val);
} }
}, },
}
handleConfirmEx() {
this.handleConfirm();
},
},
}; };
</script> </script>

View File

@ -1,146 +1,114 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<div <div
class="login-background" class="login-background"
:style="{ :style="{
backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')',
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
}" }"
> >
<div class="login-background-container"> <div class="login-background-container">
<div class="back-title"> <div class="back-title">
Wel<span>come</span> Wel<span>come</span>
<p> <p><span class="back-title-point" />奥镁耐火砖</p>
<span class="back-title-point" />奥镁耐火砖 </div>
</p> <img :src="require('../../assets/img/login.gif')" style="width: 90%; margin-left: 5%" alt="" />
</div> </div>
<img </div>
:src="require('../../assets/img/login.gif')" <el-form ref="dataForm" :model="dataForm" :rules="dataRule" class="login-form" autocomplete="on" label-position="left">
style="width: 90%; margin-left: 5%" <div class="title-container">
alt="" <h3 class="title" :title="'标题'">
/> <img src="../../assets/img/cnbm.png" style="width: 1em; height: 1em; position: relative; top: 0.15em; margin-right: 12px" alt="" />
</div> <!-- {{ "title" | i18nFilter }} -->
</div> 奥镁耐火砖PMS
<el-form </h3>
ref="dataForm" </div>
:model="dataForm"
:rules="dataRule"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title" :title="'标题'">
<img
src="../../assets/img/cnbm.png"
style="width: 1em; height: 1em; position: relative; top: .15em; margin-right: 12px"
alt=""
/>
<!-- {{ "title" | i18nFilter }} -->
奥镁耐火砖PMS
</h3>
</div>
<el-form-item prop="username" style="margin: 0px 8.3%"> <el-form-item prop="username" style="margin: 0px 8.3%">
<el-input <el-input
ref="username" ref="username"
v-model="dataForm.username" v-model="dataForm.username"
:placeholder="'请输入用户名'" :placeholder="'请输入用户名'"
name="username" name="username"
type="text" type="text"
tabindex="1" tabindex="1"
autocomplete="on" autocomplete="on"
/> />
</el-form-item> </el-form-item>
<el-tooltip <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
v-model="capsTooltip" <el-form-item prop="password" style="margin: 8px 8.3%">
content="Caps lock is On" <el-input
placement="right" :key="passwordType"
manual ref="password"
> v-model="dataForm.password"
<el-form-item prop="password" style="margin: 8px 8.3%"> :type="passwordType"
<el-input :placeholder="'请输入密码'"
:key="passwordType" name="password"
ref="password" tabindex="2"
v-model="dataForm.password" autocomplete="on"
:type="passwordType" @keyup.native="checkCapslock"
:placeholder="'请输入密码'" @blur="capsTooltip = false"
name="password" @keyup.enter.native="dataFormSubmitHandle"
tabindex="2" />
autocomplete="on" <span class="show-pwd" @click="showPwd">
@keyup.native="checkCapslock" <!-- <svg-icon
@blur="capsTooltip = false"
@keyup.enter.native="dataFormSubmitHandle"
/>
<span class="show-pwd" @click="showPwd">
<!-- <svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/> --> /> -->
</span> </span>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
<el-form-item prop="captcha" style="margin: 0px 8.3%"> <!-- <el-form-item prop="captcha" style="margin: 0px 8.3%">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="14"> <el-col :span="14">
<el-input <el-input
v-model="dataForm.captcha" v-model="dataForm.captcha"
:placeholder="$t('login.captcha')" :placeholder="$t('login.captcha')"
> >
<!-- <span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true">
<use xlink:href="#icon-safetycertificate"></use>
</svg>
</span> -->
</el-input> </el-input>
</el-col> </el-col>
<el-col :span="10" class="login-captcha"> <el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()" /> <img :src="captchaPath" @click="getCaptcha()" />
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item> -->
<!-- <lang-select class="login-language" /> --> <!-- <span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true">
<use xlink:href="#icon-safetycertificate"></use>
</svg>
</span> -->
<!-- <lang-select class="login-language" /> -->
<el-button <el-button
:loading="loading" :loading="loading"
type="primary" type="primary"
style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh" style="width: 83.4%; height: 6vh; background-color: #0b58ff; margin: 0px 8.3%; margin-top: 5vh"
@click.native.prevent="dataFormSubmitHandle" @click.native.prevent="dataFormSubmitHandle"
> >
<!-- {{ "login.logIn" | i18nFilter }} --> <!-- {{ "login.logIn" | i18nFilter }} -->
登录 登录
</el-button> </el-button>
<el-row class="login-footer"> <el-row class="login-footer">
<el-row class="login-language"> <el-row class="login-language">
<el-col <el-col :span="2" :offset="8" :class="['login-language-box', language === 'zh' ? 'isActive' : '']" @click.native="changeLanguage('zh')">
:span="2" 中文
:offset="8" </el-col>
:class="['login-language-box', language === 'zh' ? 'isActive' : '']" <el-col :span="1" :offset="1" style="color: #dcdfe6">|</el-col>
@click.native="changeLanguage('zh')" <el-col :span="2" :offset="1" :class="['login-language-box', language === 'en' ? 'isActive' : '']" @click.native="changeLanguage('en')">
> English
中文 </el-col>
</el-col> </el-row>
<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col> <el-row class="login-copyright">
<el-col <!-- {{ "copyright.copyright" | i18nFilter }}{{
:span="2"
:offset="1"
:class="['login-language-box', language === 'en' ? 'isActive' : '']"
@click.native="changeLanguage('en')"
>
English
</el-col>
</el-row>
<el-row class="login-copyright">
<!-- {{ "copyright.copyright" | i18nFilter }}{{
"copyright.company" | i18nFilter "copyright.company" | i18nFilter
}}&nbsp;&nbsp;&nbsp;&nbsp;{{ "copyright.version" | i18nFilter }}1.0 --> }}&nbsp;&nbsp;&nbsp;&nbsp;{{ "copyright.version" | i18nFilter }}1.0 -->
版权所有: &copy;中建材智能自动化研究院有限公司 2023 v1.0 版权所有: &copy;中建材智能自动化研究院有限公司 2023 v1.0
</el-row> </el-row>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
</template> </template>
<script> <script>
@ -149,96 +117,104 @@ import debounce from "lodash/debounce";
import { getUUID } from "@/utils"; import { getUUID } from "@/utils";
export default { export default {
name: "Login", name: "Login",
data() { data() {
return { return {
baseImg: require("../../assets/img/login-back.png"), baseImg: require("../../assets/img/login-back.png"),
coverImgUrl: "", coverImgUrl: "",
dataForm: { dataForm: {
username: "admin", username: "admin",
password: "admin", password: "admin",
uuid: "string", uuid: "string",
captcha: "", captcha: "",
}, },
captchaPath: "", captchaPath: "",
passwordType: "password", passwordType: "password",
capsTooltip: false, capsTooltip: false,
loading: false, loading: false,
redirect: undefined, redirect: undefined,
otherQuery: {}, otherQuery: {},
}; };
}, },
computed: { computed: {
language() { language() {
return "zh"; return "zh";
}, },
dataRule() { dataRule() {
return { return {
username: [ username: [
{ {
required: true, required: true,
message: this.$t("validate.required"), message: this.$t("validate.required"),
trigger: "blur", trigger: "blur",
}, },
], ],
password: [ password: [
{ {
required: true, required: true,
message: this.$t("validate.required"), message: this.$t("validate.required"),
trigger: "blur", trigger: "blur",
}, },
], ],
captcha: [ captcha: [
{ {
required: true, required: true,
message: this.$t("validate.required"), message: this.$t("validate.required"),
trigger: "blur", trigger: "blur",
}, },
], ],
}; };
}, },
}, },
created() { created() {
this.getCaptcha(); this.getCaptcha();
}, },
methods: { methods: {
// //
checkCapslock() {}, checkCapslock() {},
// //
showPwd() {}, showPwd() {},
// //
changeLanguage(lang) {}, changeLanguage(lang) {},
// //
getCaptcha() { getCaptcha() {
this.dataForm.uuid = getUUID(); this.dataForm.uuid = getUUID();
this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`; this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
}, },
// //
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
function() { function () {
this.$refs["dataForm"].validate((valid) => { this.$refs["dataForm"].validate((valid) => {
if (!valid) { if (!valid) {
return false; return false;
} }
this.$http this.$http
.post("/login", this.dataForm) .post("/login", this.dataForm)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
this.getCaptcha(); this.getCaptcha();
return this.$message.error(res.msg); return this.$message.error(res.msg);
} }
Cookies.set("token", res.data.token); Cookies.set("token", res.data.token);
this.$router.replace({ name: "home" }); //
}) this.$http('/sys/dict/type/all', { limit: 999, page: 1 }).then(({data: res}) => {
.catch(() => {}); // console.log('[dictData] loading...', res)
}); if (res.code === 0 && res.data) {
}, localStorage.setItem('dictList', JSON.stringify(res.data))
1000, }
{ leading: true, trailing: false } })
), // end
}, this.$router.replace({ name: "home" });
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
}; };
</script> </script>
@ -251,41 +227,41 @@ $light_gray: #fff;
$cursor: #161616; $cursor: #161616;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input { .login-container .el-input input {
color: $cursor; color: $cursor;
height: 6vh !important; height: 6vh !important;
} }
} }
/* reset element-ui css */ /* reset element-ui css */
.login-container { .login-container {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
width: 85%; width: 85%;
input { input {
background: transparent; background: transparent;
border: 0px; border: 0px;
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0px; border-radius: 0px;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
} }
} }
.el-form-item { .el-form-item {
border: 1px solid #d7d8d9; border: 1px solid #d7d8d9;
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
height: 6vh; height: 6vh;
.el-form-item__content { .el-form-item__content {
height: calc(6vh - 2px); height: calc(6vh - 2px);
line-height: 6vh; line-height: 6vh;
.el-input { .el-input {
height: calc(6vh - 2px); height: calc(6vh - 2px);
} }
} }
} }
} }
</style> </style>
@ -296,146 +272,146 @@ $light_gray: #eee;
$cursor: #161616; $cursor: #161616;
.login-container { .login-container {
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-size: cover; background-size: cover;
// background-color: $bg; // background-color: $bg;
overflow: hidden; overflow: hidden;
.login-background { .login-background {
position: absolute; position: absolute;
width: 60%; width: 60%;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.login-background-container { .login-background-container {
width: 95%; width: 95%;
.back-title { .back-title {
color: #26b9de; color: #26b9de;
font-size: 88px; font-size: 88px;
margin-left: 17%; margin-left: 17%;
span { span {
color: #fff; color: #fff;
} }
p { p {
font-size: 22px; font-size: 22px;
letter-spacing: 1px; letter-spacing: 1px;
.back-title-point { .back-title-point {
display: inline-block; display: inline-block;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 8px; border-radius: 8px;
background-color: #26b9de; background-color: #26b9de;
margin-right: 14px; margin-right: 14px;
} }
} }
} }
} }
} }
.login-form { .login-form {
position: absolute; position: absolute;
width: 40%; width: 40%;
max-width: 100%; max-width: 100%;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 0 6.67%; padding: 0 6.67%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
background: rgba($color: #fff, $alpha: 1); background: rgba($color: #fff, $alpha: 1);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1); box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1);
.login-footer { .login-footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
margin-bottom: 5vh; margin-bottom: 5vh;
} }
.login-language { .login-language {
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
color: $cursor; color: $cursor;
margin-bottom: 12px; margin-bottom: 12px;
.login-language-box { .login-language-box {
cursor: pointer; cursor: pointer;
} }
.isActive { .isActive {
color: #0b58ff; color: #0b58ff;
cursor: auto; cursor: auto;
} }
} }
.login-copyright { .login-copyright {
text-align: center; text-align: center;
color: #c7c7c7; color: #c7c7c7;
font-size: 15px; font-size: 15px;
line-height: 28px; line-height: 28px;
padding: 0 16%; padding: 0 16%;
} }
} }
.tips { .tips {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
margin-bottom: 10px; margin-bottom: 10px;
span { span {
&:first-of-type { &:first-of-type {
margin-right: 16px; margin-right: 16px;
} }
} }
} }
.svg-container { .svg-container {
padding: 6px 5px 6px 15px; padding: 6px 5px 6px 15px;
color: #000; color: #000;
vertical-align: middle; vertical-align: middle;
width: 30px; width: 30px;
display: inline-block; display: inline-block;
} }
.title-container { .title-container {
position: relative; position: relative;
margin-top: 18vh; margin-top: 18vh;
.title { .title {
font-size: 34px; font-size: 34px;
line-height: 6vh; line-height: 6vh;
margin: 0px auto 40px auto; margin: 0px auto 40px auto;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
word-break: break-all; word-break: break-all;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
letter-spacing: 2px; letter-spacing: 2px;
} }
} }
.show-pwd { .show-pwd {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 0; top: 0;
font-size: 16px; font-size: 16px;
color: $dark_gray; color: $dark_gray;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.thirdparty-button { .thirdparty-button {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 6px; bottom: 6px;
} }
@media only screen and (max-width: 470px) { @media only screen and (max-width: 470px) {
.thirdparty-button { .thirdparty-button {
display: none; display: none;
} }
} }
} }
</style> </style>