弹框样式修改
This commit is contained in:
zhujiyan
41
frontend/src/components/Dialog/index.vue
Normal file
41
frontend/src/components/Dialog/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<!-- 全局封装dialog组件 -->
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
:draggable="true"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="container">
|
||||
<slot name="container"></slot>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineExpose } from "vue";
|
||||
const dialogVisible = ref<Boolean>(false);
|
||||
const dialogTitle = ref<string>("");
|
||||
const openDialog = (title: string) => {
|
||||
dialogTitle.value = title;
|
||||
console.log(dialogVisible.value);
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -66,9 +66,9 @@ const logout = () => {
|
||||
userStore.setToken("");
|
||||
// 3.重定向到登陆页
|
||||
router.replace(LOGIN_URL);
|
||||
ElMessage.success("退出登录成功！");
|
||||
//重置菜单/导航栏权限
|
||||
authStore.resetAuthStore();
|
||||
ElMessage.success("退出登录成功！");
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -72,15 +72,19 @@
|
||||
|
||||
/* scroll bar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: var(--el-color-primary);
|
||||
width: 8px;
|
||||
height: 200px;
|
||||
// background-color: var(--el-color-primary);
|
||||
}
|
||||
/* 滚动条实际可拖动部分的颜色 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
// background-color: var(--el-border-color-darker);
|
||||
background-color: var(--el-color-primary);
|
||||
width: 8px;
|
||||
height: 100px;
|
||||
background-color: var(--el-border-color-darker) !important;
|
||||
// background-color: var(--el-color-primary);
|
||||
border-radius: 20px;
|
||||
background-color: var(--el-color-primary) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* nprogress */
|
||||
|
||||
@@ -261,17 +261,76 @@
|
||||
}
|
||||
|
||||
/* el-dialog */
|
||||
// .el-dialog {
|
||||
// .el-dialog__header {
|
||||
// padding: 15px 20px;
|
||||
// margin: 0;
|
||||
// border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
// .el-dialog__title {
|
||||
// font-size: 17px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//全局dialog修改
|
||||
.el-dialog {
|
||||
padding: 0px !important;
|
||||
border: 2px solid #3665a0;
|
||||
.el-dialog__header {
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
background: var(--el-color-primary);
|
||||
padding: 15px;
|
||||
margin-right: 0px;
|
||||
// font-family:;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 5px;
|
||||
.el-icon {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
.el-dialog__headerbtn:hover {
|
||||
.el-icon {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
.el-dialog__footer .el-button {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
height: 200px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 10px 15px;
|
||||
|
||||
//设置dialog内部form样式
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
.el-select,
|
||||
.el-input,
|
||||
.el-date-picker {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-dialog__footer {
|
||||
padding: 15px;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
border-top: 1px solid #cccccc;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
//全局el-form-item间距
|
||||
.el-form-item {
|
||||
margin-right: 10px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
240
frontend/src/views/plan/planList/components/details.vue
Normal file
240
frontend/src/views/plan/planList/components/details.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
:draggable="true"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<div class="container">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item label="Activity name" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity zone" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity count" prop="count">
|
||||
<el-select-v2
|
||||
v-model="ruleForm.count"
|
||||
placeholder="Activity count"
|
||||
:options="options"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity time" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
aria-label="Pick a date"
|
||||
placeholder="Pick a date"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="text-center" :span="2">
|
||||
<span class="text-gray-500">-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
aria-label="Pick a time"
|
||||
placeholder="Pick a time"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="Instant delivery" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity location" prop="location">
|
||||
<el-segmented v-model="ruleForm.location" :options="locationOptions" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
Offline activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
Simple brand exposure
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio value="Sponsorship">Sponsorship</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive,onMounted, defineExpose } from "vue";
|
||||
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
|
||||
|
||||
interface RuleForm {
|
||||
name: string
|
||||
region: string
|
||||
count: string
|
||||
date1: string
|
||||
date2: string
|
||||
delivery: boolean
|
||||
location: string
|
||||
type: string[]
|
||||
resource: string
|
||||
desc: string
|
||||
}
|
||||
const formSize = ref<ComponentSize>('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
name: 'Hello',
|
||||
region: '',
|
||||
count: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
location: '',
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: '',
|
||||
})
|
||||
const locationOptions = ['Home', 'Company', 'School']
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
location: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select a location',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||||
],
|
||||
})
|
||||
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
close()
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
close
|
||||
}
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`,
|
||||
}))
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
const dialogVisible = ref<boolean>(false);
|
||||
const dialogTitle = ref<string>("");
|
||||
const open = (title: string) => {
|
||||
dialogTitle.value = title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const close=()=>{
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -63,10 +63,18 @@
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
|
||||
<el-button type="primary" :icon="Upload" @click="handleRefresh">导入</el-button>
|
||||
<el-button type="primary" :icon="Check" @click="handleRefresh">合并</el-button>
|
||||
<el-button type="primary" :icon="Plus" @click="handleRefresh">新增</el-button>
|
||||
<el-button type="danger" :icon="Delete" @click="handleRefresh">删除</el-button>
|
||||
<el-button type="primary" :icon="Upload" @click="handleRefresh"
|
||||
>导入</el-button
|
||||
>
|
||||
<el-button type="primary" :icon="Check" @click="handleRefresh"
|
||||
>合并</el-button
|
||||
>
|
||||
<el-button type="primary" :icon="Plus" @click="handleRefresh"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button type="danger" :icon="Delete" @click="handleRefresh"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@@ -116,7 +124,7 @@
|
||||
type="primary"
|
||||
link
|
||||
:icon="View"
|
||||
@click="openDrawer('查看', scope.row)"
|
||||
@click="handleDetails('查看', scope.row)"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button
|
||||
@@ -136,6 +144,7 @@
|
||||
</template>
|
||||
</ProTable>
|
||||
</div>
|
||||
<plan-details ref="detailsRef"></plan-details>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx" name="useProTable">
|
||||
@@ -147,6 +156,7 @@ import { useDownload } from "@/hooks/useDownload";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import ProTable from "@/components/ProTable/index.vue";
|
||||
import ImportExcel from "@/components/ImportExcel/index.vue";
|
||||
import planDetails from "./components/details.vue";
|
||||
import {
|
||||
CirclePlus,
|
||||
Delete,
|
||||
@@ -237,6 +247,13 @@ const getTableList = (params: any) => {
|
||||
delete newParams.createTime;
|
||||
return getPlanList(newParams);
|
||||
};
|
||||
//查看详情
|
||||
const detailsRef:any = ref();
|
||||
const handleDetails = () => {
|
||||
console.log(detailsRef.value,"+++++++++++++++");
|
||||
detailsRef.value.open("查看计划");
|
||||
};
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
{ type: "selection", fixed: "left", width: 70 },
|
||||
|
||||
Reference in New Issue
Block a user