From 8e7cd003414ea4ca8f42fb3171de18f8839ece17 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 10 七月 2023 18:04:27 +0800
Subject: [PATCH] 登录页面和查询分类设置
---
src/components/makepager/TableCommonView.vue | 5
package-lock.json | 2
src/components/makepager/PublicFunctionBtnView.vue | 9
src/views/login/index.vue | 311 +++++++++++++++++++++++++++++-
package.json | 2
src/components/layout/components/appHeader/index.vue | 30 +++
src/components/makepager/SearchCommonView.vue | 19 +
src/router/custom/index.js | 12
src/views/other/QueryClassSettingDialog.vue | 148 ++++++++++++++
src/router/index.js | 17 +
10 files changed, 526 insertions(+), 29 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 8356dbc..ea439c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
"svg-sprite-loader": "^6.0.11",
"vue": "^2.6.14",
"vue-i18n": "^8.26.7",
- "vue-router": "^3.6.5",
+ "vue-router": "^3.0.7",
"vuex": "^3.6.2",
"web-storage-cache": "^1.1.1"
},
diff --git a/package.json b/package.json
index 31e0b1b..bcd70b8 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
"svg-sprite-loader": "^6.0.11",
"vue": "^2.6.14",
"vue-i18n": "^8.26.7",
- "vue-router": "^3.6.5",
+ "vue-router": "^3.0.7",
"vuex": "^3.6.2",
"web-storage-cache": "^1.1.1"
},
diff --git a/src/components/layout/components/appHeader/index.vue b/src/components/layout/components/appHeader/index.vue
index bafd8cc..88f2037 100644
--- a/src/components/layout/components/appHeader/index.vue
+++ b/src/components/layout/components/appHeader/index.vue
@@ -1,6 +1,15 @@
<template>
<div class="sales-lead">
<div class="header-title">{{ headerTitle }}</div>
+ <div class="header-user-info">
+ <div class="avatar"><el-avatar icon="el-icon-user-solid"></el-avatar></div>
+ <el-dropdown @command="handleCommand">
+ <div class="el-dropdown-link">鐢ㄦ埛鍚�<i class="el-icon-arrow-down el-icon--right"></i></div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="logout">閫�鍑�</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
</div>
</template>
@@ -9,6 +18,17 @@
name: "SalesLead",
props: {
headerTitle: String
+ },
+ data() {
+ return {}
+ },
+ methods: {
+ handleCommand(command) {
+ console.log(command)
+ if (command === "logout") {
+ this.$router.push({ path: "/login" })
+ }
+ }
}
}
</script>
@@ -16,6 +36,7 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
+ display: flex;
height: 55px;
line-height: 55px;
background-color: #fff;
@@ -25,5 +46,14 @@
font-size: 16px;
color: #475059;
}
+ .header-user-info {
+ margin-left: auto;
+ margin-right: 20px;
+ display: flex;
+ .avatar {
+ margin-top: 8px;
+ margin-right: 10px;
+ }
+ }
}
</style>
diff --git a/src/components/makepager/PublicFunctionBtnView.vue b/src/components/makepager/PublicFunctionBtnView.vue
index 8626cd8..5531e6e 100644
--- a/src/components/makepager/PublicFunctionBtnView.vue
+++ b/src/components/makepager/PublicFunctionBtnView.vue
@@ -41,16 +41,16 @@
<i class="el-icon-tickets"></i>
</div>
<!-- 鍦板浘 -->
- <div v-if="mapButton" class="btn-icon" @click="mapBtnClick">
+ <div v-if="mapButton" class="btn-icon" title="鍦板浘" @click="mapBtnClick">
<i class="el-icon-location-information"></i>
</div>
<!-- 缁熻 -->
- <div v-if="statistics" class="btn-icon" @click="statisticsBtnClick">
+ <div v-if="statistics" class="btn-icon" title="缁熻" @click="statisticsBtnClick">
<i class="el-icon-data-line"></i>
</div>
<!-- 瀹㈡埛婕忔枟 -->
- <div v-if="customFunnel" class="btn-icon" @click="statisticsBtnClick" style="color: #666">
- <i class="el-icon-postcard" title="瀹㈡埛婕忔枟"></i>
+ <div v-if="customFunnel" class="btn-icon" title="瀹㈡埛婕忔枟" @click="statisticsBtnClick" style="color: #666">
+ <i class="el-icon-postcard"></i>
</div>
</div>
</div>
@@ -176,6 +176,7 @@
border-radius: 4px;
color: rgb(0, 102, 255);
background-color: #f2f4fb;
+ cursor: pointer;
}
.view-scope {
display: flex;
diff --git a/src/components/makepager/SearchCommonView.vue b/src/components/makepager/SearchCommonView.vue
index 768342a..6eddf4f 100644
--- a/src/components/makepager/SearchCommonView.vue
+++ b/src/components/makepager/SearchCommonView.vue
@@ -7,7 +7,7 @@
<el-option v-for="item in queryClassOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
- <div class="query-class-btn">
+ <div class="query-class-btn" @click="queryClassClick">
<i class="el-icon-setting"></i>
</div>
</div>
@@ -83,12 +83,17 @@
</div>
</div>
</div>
+ <!-- 鏌ヨ鍒嗙被寮圭獥 -->
+ <QueryClassSettingDialog v-if="queryClassSetConfig.visible" :editCommonConfig="queryClassSetConfig" />
</div>
</template>
<script>
+import QueryClassSettingDialog from "@/views/other/QueryClassSettingDialog.vue"
+
export default {
name: "SearchCommonView",
+ components: { QueryClassSettingDialog },
props: {
queryClass: {
type: String,
@@ -113,6 +118,10 @@
},
data() {
return {
+ queryClassSetConfig: {
+ visible: false,
+ infomation: {}
+ },
queryClassValue: this.queryClass,
searchInput: "",
searchSelValue: this.searchSel,
@@ -144,6 +153,11 @@
}
},
methods: {
+ queryClassClick() {
+ this.queryClassSetConfig = {
+ visible: true
+ }
+ },
searchClick() {
console.log("sssssssssss")
},
@@ -195,6 +209,7 @@
font-size: 16px;
margin-left: 10px;
color: #bebebe;
+ cursor: pointer;
}
}
.search {
@@ -212,6 +227,7 @@
margin-left: 20px;
.other-search-high {
display: flex;
+ cursor: pointer;
.high-icon {
font-size: 18px;
}
@@ -219,6 +235,7 @@
.other-search-tile,
.other-search-label {
display: flex;
+ cursor: pointer;
margin-left: 20px;
.high-icon {
font-size: 18px;
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 9db25d6..c799a17 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -21,7 +21,7 @@
:label="item.label"
:width="item.width"
:min-width="item.min"
- show-overflow-tooltip="true"
+ show-overflow-tooltip
sortable
>
<template slot-scope="scope">
@@ -31,6 +31,9 @@
</template>
</el-table-column>
<slot name="tableButton" />
+ <div slot="empty">
+ <el-empty description="鏆傛棤鏁版嵁"></el-empty>
+ </div>
</el-table>
</div>
</template>
diff --git a/src/router/custom/index.js b/src/router/custom/index.js
index 19b9909..7657cff 100644
--- a/src/router/custom/index.js
+++ b/src/router/custom/index.js
@@ -11,7 +11,8 @@
name: "salesLead",
component: salesLead,
meta: {
- title: "閿�鍞嚎绱�"
+ title: "閿�鍞嚎绱�",
+ requireAuth: true
}
},
{
@@ -19,7 +20,8 @@
name: "customManage",
component: customManage,
meta: {
- title: "瀹㈡埛绠＄悊"
+ title: "瀹㈡埛绠＄悊",
+ requireAuth: true
}
},
{
@@ -27,7 +29,8 @@
name: "contacts",
component: contacts,
meta: {
- title: "鑱旂郴浜�"
+ title: "鑱旂郴浜�",
+ requireAuth: true
}
},
{
@@ -35,7 +38,8 @@
name: "followupRecords",
component: followupRecords,
meta: {
- title: "璺熻繘璁板綍"
+ title: "璺熻繘璁板綍",
+ requireAuth: true
}
}
]
diff --git a/src/router/index.js b/src/router/index.js
index 6effbfa..ed7b15b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -83,4 +83,21 @@
const router = createRouter()
+// router.beforeEach((to, from, next) => {
+// must call `next`
+// console.log(to, from)
+// if (to.path === "/custom/salesLead") {
+// next()
+// } else {
+// if (to.meta.requireAuth) {
+// next({
+// path: "/login",
+// query: { redirect: to.fullPath }
+// })
+// } else {
+// next()
+// }
+// }
+// })
+
export default router
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b80b5f9..a4e2b81 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,30 +1,307 @@
<template>
- <div class="login">
- <h1>login</h1>
+ <div class="page-login">
+ <div class="page-login--layer">
+ <div class="page-login--content" flex="dir:top cross:stretch box:justify">
+ <div class="page-login--content-header">
+ <p class="page-login--content-header-motto">
+ <!-- 鏃堕棿鏄竴鍒囪储瀵屼腑鏈�瀹濊吹鐨勮储瀵� -->
+ </p>
+ </div>
+ <div class="page-login--content-main" flex="dir:top main:center cross:center">
+ <!-- logo -->
+ <!-- <img class="page-login--logo" src="./image/logo@2x.png" /> -->
+ <!-- form -->
+ <div class="page-login--form">
+ <span style="font-family: PingFangSC-Medium, sans-serif">鐧诲綍</span>
+ <el-card shadow="never">
+ <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
+ <el-form-item prop="username">
+ <el-input type="text" v-model="formLogin.username" placeholder="鐢ㄦ埛鍚�"> </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input type="password" v-model="formLogin.password" placeholder="瀵嗙爜" show-password id="password">
+ </el-input>
+ <i id="iconfont" class="iconfont icon-biyanjing" @click="clickeye()"></i>
+ </el-form-item>
+ <!-- <el-form-item prop="code">
+ <el-input type="text" v-model="formLogin.code" placeholder="楠岃瘉鐮�">
+ <template slot="append">
+ <img class="login-code" :src="captcha" @click="getCaptchaData" />
+ </template>
+ </el-input>
+ </el-form-item> -->
+ <el-button size="default" @click="submit" type="primary" class="button-login"> 鐧诲綍 </el-button>
+ </el-form>
+ </el-card>
+ <div class="error" style="font-size: 14px; float: left">
+ {{ this.error }}
+ </div>
+ <p class="page-login--options">
+ <span> 娉ㄥ唽</span>
+ <span>|</span>
+ <span>蹇樿瀵嗙爜</span>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</template>
<script>
+// import { mapActions } from "vuex"
+// import "@/assets/font/iconfont"
+
export default {
- name: "LoginOn",
- props: {}
+ name: "LoginView",
+ data() {
+ return {
+ captcha: "",
+ // timeInterval: null,
+ // time: dayjs().format("HH:mm:ss"),
+ // 蹇�熼�夋嫨鐢ㄦ埛
+ dialogVisible: false,
+ // 琛ㄥ崟
+ formLogin: {
+ username: "admin",
+ password: "123456",
+ code: ""
+ },
+ // 琛ㄥ崟鏍￠獙
+ rules: {
+ username: [
+ {
+ required: true,
+ message: "璇疯緭鍏ョ敤鎴峰悕",
+ trigger: "blur"
+ }
+ ],
+ password: [
+ {
+ required: true,
+ message: "璇疯緭鍏ュ瘑鐮�",
+ trigger: "blur"
+ }
+ ],
+ code: [
+ {
+ required: true,
+ message: "璇疯緭鍏ラ獙璇佺爜",
+ trigger: "blur"
+ }
+ ]
+ },
+ error: ""
+ }
+ },
+ mounted() {
+ this.timeInterval = setInterval(() => {
+ // this.refreshTime()
+ }, 1000)
+ this.getCaptchaData()
+ },
+ beforeDestroy() {
+ clearInterval(this.timeInterval)
+ },
+ methods: {
+ getCaptchaData() {},
+
+ /**
+ * @description 鎻愪氦琛ㄥ崟
+ */
+ // 鎻愪氦鐧诲綍淇℃伅
+ submit() {
+ this.$refs.loginForm.validate((valid) => {
+ if (valid) {
+ // 鐧诲綍
+ // 娉ㄦ剰 杩欓噷鐨勬紨绀烘病鏈変紶楠岃瘉鐮�
+ // 鍏蜂綋闇�瑕佷紶閫掔殑鏁版嵁璇疯嚜琛屼慨鏀逛唬鐮�
+ // this.login({
+ // username: this.formLogin.username,
+ // password: this.formLogin.password,
+ // captcha: this.formLogin.code
+ // }).then((rsp) => {
+ // // 閲嶅畾鍚戝璞′笉瀛樺湪鍒欒繑鍥為《灞傝矾寰�
+ // if (rsp != "") {
+ // // this.$message.warning(rsp);
+ // this.error = "濉叆淇℃伅閿欒锛岃妫�鏌ワ紒"
+ // let _this = this
+ // setTimeout(function () {
+ // _this.error = ""
+ // }, 3000)
+ // return
+ // }
+ this.$router.replace(this.$route.query.redirect || "/").catch((err) => {
+ console.log(err)
+ })
+ // })
+ } else {
+ // 鐧诲綍琛ㄥ崟鏍￠獙澶辫触
+ // this.$message.error("琛ㄥ崟鏍￠獙澶辫触锛岃妫�鏌�");
+ this.error = "濉叆淇℃伅閿欒锛岃妫�鏌ワ紒"
+ var _this = this
+ setTimeout(function () {
+ _this.error = ""
+ }, 3000)
+ }
+ })
+ },
+ //鐐瑰嚮鐪肩潧
+ clickeye() {
+ // let eye = document.getElementById("iconfont")
+ let pwd = document.getElementById("password")
+ if (pwd.type == "password") {
+ // ;(pwd.type = "text"), (eye.className = "iconfont icon-yanjing")
+ } else {
+ // ;(pwd.type = "password"), (eye.className = "iconfont icon-biyanjing")
+ }
+ }
+ }
}
</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
+<style lang="scss">
+.el-icon-view:before {
+ content: "";
}
-ul {
- list-style-type: none;
- padding: 0;
+.iconfont:before {
+ line-height: 48px;
+ position: absolute;
+ right: 19px;
+ font-size: 18px;
+ color: rgba(0, 0, 0, 0.4);
}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
+.page-login {
+ background-size: 100%;
+ height: 100%;
+ position: relative;
+ .page-login--layer-area {
+ overflow: hidden;
+ }
+ // 鏃堕棿
+ .page-login--layer-time {
+ font-size: 24em;
+ font-weight: bold;
+ color: rgba(0, 0, 0, 0.03);
+ overflow: hidden;
+ }
+ // 鐧婚檰椤甸潰鎺т欢鐨勫鍣�
+ .page-login--content {
+ height: 100%;
+ min-height: 500px;
+ position: relative;
+ top: 0;
+ left: 0;
+ }
+ // header
+ .page-login--content-header {
+ padding: 1em 0;
+ .page-login--content-header-motto {
+ margin: 0px;
+ padding: 0px;
+ color: beige;
+ text-align: center;
+ font-size: 12px;
+ }
+ }
+ // main
+ .page-login--logo {
+ width: 240px;
+ margin-bottom: 2em;
+ margin-top: -2em;
+ position: absolute;
+ top: 7%;
+ left: 3%;
+ }
+ // 鐧诲綍琛ㄥ崟
+ .page-login--form {
+ width: 431px;
+ height: 400px;
+ left: 50%;
+ top: 30%;
+ transform: translate(-50%, 0%);
+ position: absolute;
+ background: #fafbff;
+ opacity: 0.9;
+ border-radius: 24px;
+ padding: 35px 36px;
+ text-align: center;
+ font-size: 36px;
+ line-height: 48px;
+ color: #181f30;
+ .el-form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .el-form-item {
+ margin-bottom: 24px;
+ width: 359px;
+ height: 48px;
+ background: #fff;
+ border: 8px;
+ .el-input__inner {
+ font-size: 14px;
+ height: 48px;
+ line-height: 20px;
+ padding-left: 16px;
+ color: #181f30;
+ }
+ }
+ }
+ // 鍗＄墖
+ .el-card {
+ margin-bottom: 15px;
+ background: transparent;
+ border: 0;
+ }
+ // 鐧诲綍鎸夐挳
+ .button-login {
+ width: 359px;
+ height: 48px;
+ font-size: 16px;
+ line-height: 20px;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+ // 杈撳叆妗嗗乏杈圭殑鍥捐〃鍖哄煙缂╃獎
+ .el-input-group__prepend {
+ padding: 0px 14px;
+ }
+ .login-code {
+ height: 40px - 2px;
+ display: block;
+ margin: 0px -20px;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ }
+ // 鐧婚檰閫夐」
+ .page-login--options {
+ font-family: PingFangSC-Medium, sans-serif;
+ color: #181f30 !important;
+ margin: 0px;
+ padding: 0px;
+ font-size: 14px;
+ line-height: 20px;
+ color: #2a78fb;
+ margin-right: 34px;
+ margin-bottom: 15px;
+ font-weight: bold;
+ float: right;
+ :nth-child(2) {
+ margin: 0px 5px;
+ }
+ }
+ .page-login--quick {
+ width: 100%;
+ }
+ }
+ .error {
+ float: left;
+ font-size: 14px;
+ line-height: 20px;
+ margin-left: 35px;
+ color: #f62f2f;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
}
</style>
diff --git a/src/views/other/QueryClassSettingDialog.vue b/src/views/other/QueryClassSettingDialog.vue
new file mode 100644
index 0000000..b1818c7
--- /dev/null
+++ b/src/views/other/QueryClassSettingDialog.vue
@@ -0,0 +1,148 @@
+<template>
+ <div class="query-class-set">
+ <el-dialog title="鏌ヨ鍒嗙被璁剧疆" :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
+ <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f4f8fe' }">
+ <el-table-column label="鍒嗙被鍚嶇О" prop="className"> </el-table-column>
+ <el-table-column label="鎿嶄綔" width="200px">
+ <template slot-scope="scope">
+ <i class="el-icon-edit common-style first" title="缂栬緫" @click="editClick(scope.$index, scope.row)"></i>
+ <i class="el-icon-document-copy common-style" title="澶嶅埗" @click="copyClick(scope.$index, scope.row)"></i>
+ <i
+ v-if="scope.$index !== 0 && scope.$index !== tableData.length - 1"
+ class="el-icon-bottom common-style"
+ title="涓嬬Щ"
+ @click="moveDownClick(scope.$index, scope.row)"
+ ></i>
+ <i
+ v-if="scope.$index !== 0 && scope.$index !== 1"
+ class="el-icon-top common-style"
+ title="涓婄Щ"
+ @click="moveUpClick(scope.$index, scope.row)"
+ ></i>
+ <i
+ v-if="scope.$index !== 0"
+ class="el-icon-delete common-style"
+ title="鍒犻櫎"
+ @click="deleteClick(scope.$index, scope.row)"
+ ></i>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div style="padding: 10px">
+ <el-button type="primary" size="mini">鏂板缓鍒嗙被</el-button>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" size="small" @click="editConfig.visible = false">淇濆瓨</el-button>
+ <el-button size="small" @click="editConfig.visible = false">鍙栨秷</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "QueryClassSettingDialog",
+ props: {
+ editCommonConfig: {
+ type: Object,
+ default: () => {
+ return {
+ visible: false,
+ infomation: {}
+ }
+ }
+ }
+ },
+ components: {},
+ computed: {},
+ data() {
+ return {
+ dialogWidth: "30%",
+ editConfig: this.editCommonConfig,
+ tableData: [
+ {
+ className: "鍏ㄩ儴"
+ },
+ {
+ className: "杩囨湡鏈弧60澶�"
+ },
+ {
+ className: "杩囨湡鏈弧30澶�"
+ },
+ {
+ className: "宸茶繃鏈�"
+ }
+ ]
+ }
+ },
+ created() {},
+ methods: {
+ handleClose() {
+ this.editConfig.visible = false
+ },
+ // 缂栬緫
+ editClick(index, row) {
+ console.log(index, row)
+ },
+ // 澶嶅埗
+ copyClick() {},
+ // 涓婄Щ
+ moveUpClick(index) {
+ var that = this
+ if (index > 1) {
+ const upData = that.tableData[index - 1]
+ that.tableData.splice(index - 1, 1)
+ that.tableData.splice(index, 0, upData)
+ }
+ },
+ // 涓嬬Щ
+ moveDownClick(index) {
+ var that = this
+ const downData = that.tableData[index + 1]
+ that.tableData.splice(index + 1, 1)
+ that.tableData.splice(index, 0, downData)
+ },
+ // 鍒犻櫎
+ deleteClick() {}
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+.query-class-set {
+ .common-style {
+ font-size: 16px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+ .first {
+ margin-left: 0px;
+ }
+ .dialog-footer {
+ background-color: #f5f5f5;
+ height: 55px;
+ line-height: 55px;
+ }
+}
+::v-deep {
+ .el-dialog__header {
+ padding: 12.5px 10px;
+ border-bottom: 1px solid #e5e5e5;
+ .el-dialog__title {
+ font-size: 15px;
+ color: #323232;
+ font-weight: bold;
+ }
+ }
+ .el-dialog__body {
+ padding: 0px;
+ }
+ .el-dialog__footer {
+ padding: 0px;
+ text-align: center;
+ box-sizing: border-box;
+ border-top: 1px solid #dadee5;
+ }
+}
+</style>
--
Gitblit v1.8.0