弹框样式修改

frontend/components.d.ts

@@ -14,11 +14,15 @@ declare module 'vue' {
     ComplexProTable: typeof import('./src/components/proTable/complexProTable/index.vue')['default']
     Default: typeof import('./src/components/echarts/pie/default.vue')['default']
     Detail: typeof import('./src/components/proTable/useProTable/detail.vue')['default']
+    Dialog: typeof import('./src/components/Dialog/index.vue')['default']
     Document: typeof import('./src/components/proTable/document/index.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@@ -40,8 +44,11 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -50,6 +57,7 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElUpload: typeof import('element-plus/es')['ElUpload']

frontend/src/components/Dialog/index.vue

@@ -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>

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -66,9 +66,9 @@ const logout = () => {
     userStore.setToken("");
     // 3.重定向到登陆页
     router.replace(LOGIN_URL);
+    ElMessage.success("退出登录成功！");
     //重置菜单/导航栏权限
     authStore.resetAuthStore();
-    ElMessage.success("退出登录成功！");
   });
 };
 

frontend/src/styles/common.scss

@@ -72,15 +72,19 @@
 
 /* scroll bar */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
-  height: 6px;
+  height: 200px;
-  background-color: var(--el-color-primary);
+  // background-color: var(--el-color-primary);
 }
 /* 滚动条实际可拖动部分的颜色 */
 ::-webkit-scrollbar-thumb {
-  // background-color: var(--el-border-color-darker);
+  width: 8px;
-  background-color: var(--el-color-primary);
+  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 */

frontend/src/styles/element.scss

@@ -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;
+    background: var(--el-color-primary);
-    margin: 0;
+    padding: 15px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
+    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;
 }

frontend/src/views/plan/planList/components/details.vue

@@ -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>

frontend/src/views/plan/planList/index.vue

@@ -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="Upload" @click="handleRefresh"
-            <el-button type="primary" :icon="Check" @click="handleRefresh">合并</el-button>
+              >导入</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="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 },