Skip to content

肖文锋 / clm-admin

Go to a project
Commit 11c053cc by xiaowenfeng
Options

1、修改了大量

parent 9db13274
Expand all
Inline Side-by-side
Showing with 685 additions and 154 deletions
src/components/DepSelectModal.vue 0 → 100644
<template>
<a-modal
:get-container="'#rightBody'"
:visible="true"
:maskStyle="{position: 'absolute'}"
:closable="false"
:wrapClassName="'qd-input-modal'"
:okText="'确定'"
:cancelText="'取消'"
title="选择部门"
@ok="handleOk"
>
<div class="select-wrap">
<div class="content">
<p class="title">选择</p>
<div class="choose">
<a-input
:placeholder="'搜索部门名'"
allow-clear
/>
<div class="current">
<div>深圳企大云科技有限公司</div>
<div>></div>
<div>客服部</div>
</div>
</div>
</div>
<div class="content">
<p class="title">已选</p>
<div class="choose"></div>
</div>
</div>
</a-modal>
</template>
<style lang="less" scoped>
.select-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
.content {
width: 295px;
height: 100%;
.title {
width: 100%;
height: 50px;
padding: 16px 0 7px 0;
font-size: 18px;
}
.choose {
width: 100%;
height: 370px;
line-height: 20px;
border-radius: 5px;
background-color: rgba(249, 249, 249, 100);
text-align: center;
border: 1px solid rgba(227, 227, 227, 100);
padding: 7px 9px;
.ant-input-affix-wrapper {
height: 45px;
font-size: 14px;
::v-deep(.ant-input-clear-icon) {
font-size: 16px;
}
}
}
}
}
</style>
src/components/DepartmentDrawer.vue 0 → 100644
<template>
<a-drawer
title="编辑部门"
:placement="placement"
:closable="false"
:visible="visible"
:wrap-style="{ position: 'absolute' }"
:wrapClassName="'right-drawer'"
:get-container="'#rightBody'"
>
<p class="drawer-form-title">部门信息</p>
<div class="department-edit">
<a-form>
<a-form-item label="部门名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" allow-clear :placeholder="'最多允许输入30个汉子 (60字符)'"/>
</a-form-item>
<a-form-item label="上级部门">
<a-input v-model:value="modelRef.superiorDepartment" allow-clear/>
</a-form-item>
<a-form-item label="简介" class="drawer-text">
<a-textarea v-model:value="modelRef.describe" allow-clear/>
</a-form-item>
</a-form>
</div>
<p class="drawer-form-title">部门必修课</p>
<div class="bot-btn">
<a-space :size="35">
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
删除
</a-button>
<a-button type="default" class="qd-right-drawer-btn qd-right-drawer-btn-save " @click="onSubmit">
保存
</a-button>
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
取消
</a-button>
</a-space>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { useForm } from '@ant-design-vue/use'
export default {
props: ['visible'],
data () {
return {
placement: 'right'
}
},
methods: {
onClose () {
this.$emit('close')
}
},
setup () {
const modelRef = reactive({
name: '',
superiorDepartment: '',
describe: ''
})
const rulesRef = reactive({
name: [
{
required: true,
message: '请输入部门名称'
}
]
})
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
const onSubmit = e => {
e.preventDefault()
validate()
.then(() => {
console.log(toRaw(modelRef))
})
.catch(err => {
console.log('error', err)
})
}
return {
validateInfos,
resetFields,
modelRef,
onSubmit
}
}
}
</script>
<style lang="less" scoped>
.department-edit{
height: 276px;
width: 100%;
padding-top: 20px;
.drawer-text{
height: 101px !important;
padding-top: 1px !important;
}
}
</style>
src/components/Header.vue
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
color: #101010; color: #101010;
z-index: 1001;
& > * { & > * {
position: absolute; position: absolute;
top: 50%; top: 50%;
......
src/components/TestDrawer.vue 0 → 100644
<template>
<a-drawer
title="编辑部门"
:placement="placement"
:closable="false"
:visible="visible"
:wrap-style="{ position: 'absolute' }"
:wrapClassName="'right-drawer'"
:get-container="'#rightBody'"
@close="onClose"
>
<p class="drawer-form-title">部门信息</p>
<div class="department-edit">
<a-form>
<a-form-item label="部门名称" v-bind="validateInfos.name">
<a-input v-model:value="modelRef.name" allow-clear :placeholder="'最多允许输入30个汉子 (60字符)'"/>
</a-form-item>
<a-form-item label="上级部门">
<a-input v-model:value="modelRef.superiorDepartment" allow-clear/>
</a-form-item>
<a-form-item label="简介" class="drawer-text">
<a-textarea v-model:value="modelRef.describe" allow-clear/>
</a-form-item>
</a-form>
</div>
<p class="drawer-form-title">部门必修课</p>
<div class="bot-btn">
<a-space :size="35">
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
删除dddd
</a-button>
<a-button type="default" class="qd-right-drawer-btn qd-right-drawer-btn-save " @click="onSubmit">
保存
</a-button>
<a-button type="default" class="qd-right-drawer-btn" @click="onClose">
取消
</a-button>
</a-space>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRaw } from 'vue'
import { useForm } from '@ant-design-vue/use'
export default {
props: ['visible'],
data () {
return {
placement: 'right'
}
},
methods: {
onClose () {
this.$emit('close')
}
},
setup () {
const modelRef = reactive({
name: '',
superiorDepartment: '',
describe: ''
})
const rulesRef = reactive({
name: [
{
required: true,
message: '请输入部门名称'
}
]
})
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)
const onSubmit = e => {
e.preventDefault()
validate()
.then(() => {
console.log(toRaw(modelRef))
})
.catch(err => {
console.log('error', err)
})
}
return {
validateInfos,
resetFields,
modelRef,
onSubmit
}
}
}
</script>
<style lang="less" scoped>
.department-edit{
height: 276px;
width: 100%;
padding-top: 20px;
.drawer-text{
height: 101px !important;
padding-top: 1px !important;
}
}
</style>
src/components/Tree.vue 0 → 100644
<template>
<a-tree
class="qd-tree"
v-model:expandedKeys="expandedKeys"
:treeData="treeData"
:replaceFields="{
children:'children',
title:'name',
key:'id'
}"
showIcon
@select="selectOrganization"
>
<template #icon>
<span class="iconfont iconjiegou"></span>
</template>
<template v-slot:title="item">
<span class="qd-tree-title">{{item.name}}</span>
<a-space :size="2" class="oprate-icon" v-show="isEdit">
<a-button type="default" @click.stop="testAdd(item)"><PlusOutlined></PlusOutlined></a-button>
<a-button type="default" @click.stop="test(item)"><CloseOutlined></CloseOutlined></a-button>
</a-space>
<div v-if="addSub === item.id" class="add-sub">
<a-input @click.stop=""></a-input>
<CloseCircleFilled @click.stop=""/>
<CheckCircleFilled @click.stop=""/>
</div>
</template>
<!-- <template #custom=item>
<span>{{item.title}}</span>
<a-button type="default" @click.stop="test(item)">删除</a-button>
<a-button type="default" @click.stop="test(item)">添加</a-button>
</template> -->
</a-tree>
</template>
<script>
import { CloseOutlined, PlusOutlined, CloseCircleFilled, CheckCircleFilled } from '@ant-design/icons-vue'
export default {
props: {
treeData: {
required: true,
type: Array
},
defaultExpandedKeys: {
required: true,
type: Array
}
},
mounted () {
this.expandedKeys = this.defaultExpandedKeys
},
data () {
return {
expandedKeys: [],
addSub: '',
isEdit: false
}
},
components: {
CloseOutlined,
PlusOutlined,
CloseCircleFilled,
CheckCircleFilled
},
methods: {
testAdd (e) {
console.log(e.dataRef.id)
console.log('this.expandedKeys:', this.expandedKeys)
this.expandedKeys.push(e.dataRef.id)
this.addSub = e.dataRef.id
},
selectOrganization (key, e) {
console.log(key)
console.log(e)
// this.departmentList.push({
// id: e.node.dataRef.id + 11,
// parentId: e.node.dataRef.id,
// name: '销售3组一部',
// seq: 3,
// folderCount: 0,
// objectCount: 0,
// spread: '1',
// editable: '1'
// })
}
}
}
</script>
<style lang="less" scoped>
.qd-tree {
::v-deep(.ant-tree-node-content-wrapper) {
height: unset;
.ant-tree-title{
font-size: 16px;
.qd-tree-title {
padding-right: 16px;
}
.ant-btn {
transform: scale(0.8);
padding: 0;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: none;
border: none;
}
.add-sub {
margin-left: 19px;
position: relative;
.ant-input {
height: 30px;
width: 247px;
padding-right: 60px;
}
.anticon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
.anticon-close-circle{
right: 36px;
color: #D2D2D2;
:hover {
color: #bfbfbf;
}
}
.anticon-check-circle{
right: 11px;
color: #101010;
:hover {
color: #000;
}
}
}
}
}
::v-deep(.ant-tree-switcher) {
top: 2.5px;
}
::v-deep(.ant-tree-node-selected){
background: #CECECE 100% !important;
}
::v-deep(.iconjiegou) {
font-size: 24px;
}
::v-deep(.ant-tree-switcher-icon) {
font-size: 16px !important;
}
.anticon {
font-size: 16px;
}
}
</style>
src/css/common.less
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
@right-operate: calc(100% - @tree-menu-width); @right-operate: calc(100% - @tree-menu-width);
@e3-color: #E3E3E3 100%; @e3-color: #E3E3E3 100%;
@f9-color: #F9F9F9 100%; @f9-color: #F9F9F9 100%;
@right-drawer-header-height: 111px;
@right-drawer-btns-height: 81px;
@right-drawer-body-height: calc(100% - @right-drawer-header-height - @right-drawer-btns-height);
.has-top-nav-page-wrap { .has-top-nav-page-wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -56,3 +59,76 @@ ...@@ -56,3 +59,76 @@
} }
} }
} }
.right-body {
::v-deep(.right-drawer) {
.ant-drawer-content-wrapper{
width: 669px !important;
}
.ant-drawer-header {
padding: 54px 23px 21px 23px;
border: none;
height: @right-drawer-header-height;
.ant-drawer-title{
line-height: 36px;
font-size: 24px;
}
}
.ant-drawer-body{
padding: 0 23px;
height: @right-drawer-body-height;
.drawer-form-title {
height: 36px;
line-height: 36px;
font-size: 16px;
padding: 0 9px;
background-color: #f0f0f0;
font-family: SourceHanSansSC-regular;
margin: 0;
}
}
.ant-drawer-content-wrapper {
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(255, 255, 255, 100);
}
.bot-btn {
position: absolute;
bottom: 0;
width: 100%;
height: @right-drawer-btns-height;
border-top: 1px solid #e8e8e8;
padding: 23px 23px 22px 23px;
text-align: center;
left: 0;
background: #fff;
border-radius: 0 0 4px 4px;
.qd-right-drawer-btn{
width: 85px;
height: 36px;
border-radius: 4px;
padding: 0;
}
.qd-right-drawer-btn-save {
background: #000000 100%;
color: #fff;
}
}
.ant-form-item {
height: 64px;
padding: 14px 0;
margin: 0;
.ant-form-item-label {
width: 148px;
}
}
.ant-input-affix-wrapper-textarea-with-clear-btn{
height: 100px;
}
textarea {
resize: none;
}
.ant-form-item-control-wrapper {
width: 458px;
}
}
}
src/main.js
...@@ -3,8 +3,20 @@ import App from './App.vue' ...@@ -3,8 +3,20 @@ import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import http from './service/http' import http from './service/http'
import { Button, Popover, Menu, Breadcrumb, Input, Tree, Table, Space } from 'ant-design-vue'
import './libs/flexible' import './libs/flexible'
import {
Button,
Popover,
Menu,
Breadcrumb,
Input,
Tree,
Table,
Space,
Drawer,
Form,
Modal
} from 'ant-design-vue'
// console.log(process.env) // console.log(process.env)
...@@ -28,4 +40,9 @@ app.use(Input) ...@@ -28,4 +40,9 @@ app.use(Input)
app.use(Tree) app.use(Tree)
app.use(Table) app.use(Table)
app.use(Space) app.use(Space)
app.use(store).use(router).mount('#app') app.use(Drawer)
app.use(Form)
app.use(Modal)
app.use(store)
app.use(router)
app.mount('#app')
src/views/Home.vue
<template> <template>
<div class="right-body"> <div class="right-body" id="rightBody">
<div class="right-main"> <div class="right-main">
<div class="breadcrumb"> <div class="breadcrumb">
<a-breadcrumb separator=">>"> <a-breadcrumb separator=">>">
...@@ -50,6 +50,7 @@ export default { ...@@ -50,6 +50,7 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('../css/common.less');
@footer-height: 43px; @footer-height: 43px;
@right-main-padding-top: 18px; @right-main-padding-top: 18px;
@right-main-padding-right: 40px; @right-main-padding-right: 40px;
...@@ -62,6 +63,65 @@ export default { ...@@ -62,6 +63,65 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #F9F9F9 100%; background: #F9F9F9 100%;
position: relative;
overflow: hidden;
::v-deep(.ant-modal-root) {
.qd-input-modal{
position: absolute;
.ant-modal {
width: 708px !important;
border-radius: 5px;
.ant-modal-content {
background: none;
.ant-modal-header {
height: 62px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background: #F4F4F4 10000%;
.ant-modal-title {
font-size: 18px;
height: 27px;
line-height: 27px;
}
}
.ant-modal-body {
background: #FFFFFF 100%;
height: 450px;
padding: 0 41px;
}
.ant-modal-footer {
border: none;
height: 67px;
text-align: center;
background: #FFFFFF 100%;
position: relative;
.ant-btn {
position: absolute;
padding: 0;
height: 30px;
line-height: 30px;
width: 80px;
border-radius: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
}
div {
>:last-child {
left: 254px;
background: #000;
color: #fff;
border: none;
}
>:first-child {
left: 375px;
}
}
}
}
}
}
}
.right-main { .right-main {
width: 100%; width: 100%;
height: calc(100% - @footer-height); height: calc(100% - @footer-height);
......
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 sign in to comment