弹窗样式

src/components/cus/CusDialog.vue

@@ -78,7 +78,7 @@ export default defineComponent({
     footAlign: {default: 'center', validator(val: string) {
       return ['center', 'right'].includes(val)
     }},
-    footPadding: {default: '16px 26px'},
+    footPadding: {default: '24px'},
     height: {default: '60%'},
     maxHeight: {default: 'unset'},
     minHeight: {default: 'unset'},

src/components/cus/CusFormColumn.vue

@@ -396,6 +396,14 @@ export default defineComponent({
         border: 1px solid rgba(54,155,255,0.2);
         box-shadow: none;
       }
+      .el-textarea {
+        .el-textarea__inner {
+          background: rgba(54,155,255,0.1);
+          border-radius: 2px;
+          border: 1px solid rgba(54,155,255,0.2);
+          box-shadow: none;
+        }
+      }
     }
   }
 }

src/components/cus/cus-form-link/upload.vue

@@ -17,7 +17,7 @@
         :on-remove="handleRemove"
         :disabled="isLimitCpt"
     >
-      <el-tooltip :content="acceptTooltipCpt" placement="top" popper-class="upload-tooltip-popper">
+      <el-tooltip :content="acceptTooltipCpt" placement="top" popper-class="upload-tooltip-popper" :disabled="true">
         <template v-if="layout === 'card'">
           <div class="upload-layout-card __hover" :class="{'limit-disabled': isLimitCpt}">
             <SvgIcon name="add" color="#0062E9" size="24"/>
@@ -27,7 +27,7 @@
         </template>
         <template v-else>
           <div class="upload-layout-list_button" :class="{'limit-disabled': isLimitCpt}">
-            <SvgIcon name="add" color="#ffffff" size="14"/>
+<!--            <SvgIcon name="add" color="#ffffff" size="14"/>-->
             选择{{acceptTypeFormatCpt}}
             <template v-if="limit > 0">(最多{{ limit }}个)</template>
           </div>
@@ -128,7 +128,7 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       paramVal: <any>props.param,
-      loading: true,
+      loading: false,
       elementLoadingBackground: inject('element-loading-background', null),
       currentImg: {
         show: false,
@@ -165,14 +165,14 @@ export default defineComponent({
       if (that.$util.isValue(props.acceptType)) {
         str += props.acceptType
       } else {
-        if (props.type === 'all') {
-          str += store.state.app.uploadConfig.imgType
-          str += ',' + store.state.app.uploadConfig.fileType
-        } else if (props.type === 'img') {
-          str += store.state.app.uploadConfig.imgType
-        } else if (props.type === 'file') {
-          str += store.state.app.uploadConfig.fileType
-        }
+        // if (props.type === 'all') {
+        //   str += store.state.app.uploadConfig.imgType
+        //   str += ',' + store.state.app.uploadConfig.fileType
+        // } else if (props.type === 'img') {
+        //   str += store.state.app.uploadConfig.imgType
+        // } else if (props.type === 'file') {
+        //   str += store.state.app.uploadConfig.fileType
+        // }
       }
       return str
     })
@@ -182,7 +182,7 @@ export default defineComponent({
         str += `自定义文件`
       } else {
         if (props.type === 'all') {
-          str += `图片、文件`
+          str += `文件`
         } else if (props.type === 'img') {
           str += `图片`
         } else if (props.type === 'file') {
@@ -196,14 +196,14 @@ export default defineComponent({
       if (that.$util.isValue(props.acceptType)) {
         str += `只支持大小在0~${props.acceptMax}M内，格式为${props.acceptType}的自定义文件`
       } else {
-        if (props.type === 'all') {
-          str += `只支持大小在0~${store.state.app.uploadConfig.imgMax}M内，格式为${store.state.app.uploadConfig.imgType}的图片，`
-          str += `或大小在0~${store.state.app.uploadConfig.fileMax}M内，格式为${store.state.app.uploadConfig.fileType}的文件`
-        } else if (props.type === 'img') {
-          str += `只支持大小在0~${store.state.app.uploadConfig.imgMax}M内，格式为${store.state.app.uploadConfig.imgType}的图片`
-        } else if (props.type === 'file') {
-          str += `只支持大小在0~${store.state.app.uploadConfig.fileMax}M内，格式为${store.state.app.uploadConfig.fileType}的文件`
-        }
+        // if (props.type === 'all') {
+        //   str += `只支持大小在0~${store.state.app.uploadConfig.imgMax}M内，格式为${store.state.app.uploadConfig.imgType}的图片，`
+        //   str += `或大小在0~${store.state.app.uploadConfig.fileMax}M内，格式为${store.state.app.uploadConfig.fileType}的文件`
+        // } else if (props.type === 'img') {
+        //   str += `只支持大小在0~${store.state.app.uploadConfig.imgMax}M内，格式为${store.state.app.uploadConfig.imgType}的图片`
+        // } else if (props.type === 'file') {
+        //   str += `只支持大小在0~${store.state.app.uploadConfig.fileMax}M内，格式为${store.state.app.uploadConfig.fileType}的文件`
+        // }
       }
       if (isLimitCpt.value) {
         str = `最多上传${props.limit}个${acceptTypeFormatCpt.value}`
@@ -223,45 +223,45 @@ export default defineComponent({
           return false
         }
       } else {
-        if (props.type === 'img') {
-          if (file.size / (1024 * 1024) > store.state.app.uploadConfig.imgMax) {
-            ElMessage.warning(`图片大小不可超过${store.state.app.uploadConfig.imgMax}M`)
-            return false
-          } else if (!store.state.app.uploadConfig.imgType.split(',').some(v => file.name.includes(v))) {
-            ElMessage.warning(`图片类型仅支持${store.state.app.uploadConfig.imgType}`)
-            return false
-          }
-        } else if (props.type === 'file') {
-          if (file.size / (1024 * 1024) > store.state.app.uploadConfig.fileMax) {
-            ElMessage.warning(`文件大小不可超过${store.state.app.uploadConfig.fileMax}M`)
-            return false
-          } else if (!store.state.app.uploadConfig.fileType.split(',').some(v => file.name.includes(v))) {
-            ElMessage.warning(`文件类型仅支持${store.state.app.uploadConfig.fileType}`)
-            return false
-          }
-        } else if (props.type === 'all') {
-          if (!acceptTypeCpt.value.split(',').some(v => file.name.includes(v))) {
-            ElMessage.warning(`文件或图片类型仅支持${acceptTypeCpt.value}`)
-            return false
-          } else {
-            if (store.state.app.uploadConfig.imgType.split(',').some(v => file.name.includes(v))) {
-              if (file.size / (1024 * 1024) > store.state.app.uploadConfig.imgMax) {
-                ElMessage.warning(`图片大小不可超过${store.state.app.uploadConfig.imgMax}M`)
-                return false
-              }
-            } else if (store.state.app.uploadConfig.fileType.split(',').some(v => file.name.includes(v))) {
-              if (file.size / (1024 * 1024) > store.state.app.uploadConfig.fileMax) {
-                ElMessage.warning(`文件大小不可超过${store.state.app.uploadConfig.fileMax}M`)
-                return false
-              }
-            }
-          }
-        }
+        // if (props.type === 'img') {
+        //   if (file.size / (1024 * 1024) > store.state.app.uploadConfig.imgMax) {
+        //     ElMessage.warning(`图片大小不可超过${store.state.app.uploadConfig.imgMax}M`)
+        //     return false
+        //   } else if (!store.state.app.uploadConfig.imgType.split(',').some(v => file.name.includes(v))) {
+        //     ElMessage.warning(`图片类型仅支持${store.state.app.uploadConfig.imgType}`)
+        //     return false
+        //   }
+        // } else if (props.type === 'file') {
+        //   if (file.size / (1024 * 1024) > store.state.app.uploadConfig.fileMax) {
+        //     ElMessage.warning(`文件大小不可超过${store.state.app.uploadConfig.fileMax}M`)
+        //     return false
+        //   } else if (!store.state.app.uploadConfig.fileType.split(',').some(v => file.name.includes(v))) {
+        //     ElMessage.warning(`文件类型仅支持${store.state.app.uploadConfig.fileType}`)
+        //     return false
+        //   }
+        // } else if (props.type === 'all') {
+        //   if (!acceptTypeCpt.value.split(',').some(v => file.name.includes(v))) {
+        //     ElMessage.warning(`文件或图片类型仅支持${acceptTypeCpt.value}`)
+        //     return false
+        //   } else {
+        //     if (store.state.app.uploadConfig.imgType.split(',').some(v => file.name.includes(v))) {
+        //       if (file.size / (1024 * 1024) > store.state.app.uploadConfig.imgMax) {
+        //         ElMessage.warning(`图片大小不可超过${store.state.app.uploadConfig.imgMax}M`)
+        //         return false
+        //       }
+        //     } else if (store.state.app.uploadConfig.fileType.split(',').some(v => file.name.includes(v))) {
+        //       if (file.size / (1024 * 1024) > store.state.app.uploadConfig.fileMax) {
+        //         ElMessage.warning(`文件大小不可超过${store.state.app.uploadConfig.fileMax}M`)
+        //         return false
+        //       }
+        //     }
+        //   }
+        // }
       }
       return file
     }
     const handleRequest = async (options) => {
-      state.loading = true
+      // state.loading = true
       if (that.$util.isValue(props.acceptType)) {
         const result: any = await props.acceptFunc(options)
         if (result?.[props.urlKey] && result?.[props.nameKey]) {
@@ -271,35 +271,35 @@ export default defineComponent({
         }
         state.loading = false
       } else {
-        if (store.state.app.uploadConfig.imgType.split(',').some(v => options.file.name.includes(v))) {
-          const formData = new FormData();
-          formData.append("file", options.file);
-          that.$api.uploadPicOnly(formData).then(res => {
-            if (res?.code === 200) {
-              state.paramVal = [...state.paramVal, {
-                [props.urlKey]: res.imgPath,
-                [props.nameKey]: res.fileName
-              }]
-            }
-            state.loading = false
-          }).catch(() => {
-            state.loading = false
-          })
-        } else if (store.state.app.uploadConfig.fileType.split(',').some(v => options.file.name.includes(v))) {
-          const formData = new FormData();
-          formData.append("file", options.file);
-          that.$api.uploadFile(formData).then(res => {
-            if (res?.code === 200) {
-              state.paramVal = [...state.paramVal, {
-                [props.urlKey]: res.url,
-                [props.nameKey]: res.fileName
-              }]
-            }
-            state.loading = false
-          }).catch(() => {
-            state.loading = false
-          })
-        }
+        // if (store.state.app.uploadConfig.imgType.split(',').some(v => options.file.name.includes(v))) {
+        //   const formData = new FormData();
+        //   formData.append("file", options.file);
+        //   that.$api.uploadPicOnly(formData).then(res => {
+        //     if (res?.code === 200) {
+        //       state.paramVal = [...state.paramVal, {
+        //         [props.urlKey]: res.imgPath,
+        //         [props.nameKey]: res.fileName
+        //       }]
+        //     }
+        //     state.loading = false
+        //   }).catch(() => {
+        //     state.loading = false
+        //   })
+        // } else if (store.state.app.uploadConfig.fileType.split(',').some(v => options.file.name.includes(v))) {
+        //   const formData = new FormData();
+        //   formData.append("file", options.file);
+        //   that.$api.uploadFile(formData).then(res => {
+        //     if (res?.code === 200) {
+        //       state.paramVal = [...state.paramVal, {
+        //         [props.urlKey]: res.url,
+        //         [props.nameKey]: res.fileName
+        //       }]
+        //     }
+        //     state.loading = false
+        //   }).catch(() => {
+        //     state.loading = false
+        //   })
+        // }
       }
     }
     const fileTypeMapper = new Map([
@@ -356,10 +356,10 @@ export default defineComponent({
       state.currentImg.url = ''
     }
     onMounted(() => {
-      state.loading = true
-      store.dispatch('app/LOAD_UPLOAD_CONFIG').then(() => {
-        state.loading = false
-      })
+      // state.loading = true
+      // store.dispatch('app/LOAD_UPLOAD_CONFIG').then(() => {
+      //   state.loading = false
+      // })
     })
     return {
       ...toRefs(state),
@@ -391,13 +391,14 @@ export default defineComponent({
   .el-upload-com {
     :deep(.el-upload) {
       .upload-layout-list_button {
-        height: 32px;
+        height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0 18px;
-        background-color: #0062E9;
+        padding: 0 6px;
+        background-color: rgba(0, 133, 247, 0.2);
         border-radius: 4px;
+        border: 1px solid rgba(0, 133, 247, 0.5);
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
@@ -440,6 +441,9 @@ export default defineComponent({
       margin: 0;
       .el-upload-list__item {
         transition: none;
+        &:hover {
+          background-color: #175096;
+        }
         .upload-layout-list_item {
           display: flex;
           align-items: center;

src/style/cus.scss

@@ -27,6 +27,9 @@
     overflow: hidden;
   }
 }
+.__normal-form {
+  padding: 16px 24px 0;
+}
 
 .__cus-pagination {
   display: flex;
@@ -150,27 +153,50 @@
   }
   .el-overlay-dialog {
     .el-dialog {
+      background-color: #0E2F57;
       height: var(--cus-dialog_height);
-      $borderRadius: 8px;
+      $borderRadius: 10px;
       border-radius: $borderRadius;
       display: flex;
       flex-direction: column;
       .el-dialog__header {
         padding: 0;
         margin: 0;
+        background-color: transparent;
+        box-shadow: none;
         ._cus-dialog-head {
-          height: 50px;
+          height: 40px;
           width: 100%;
-          background-color: #F5F7FA;
+          background: linear-gradient(90deg, rgba(2, 255, 241, 0.2) 0%, rgba(2, 255, 241, 0) 100%);
           display: flex;
           align-items: center;
           border-radius: $borderRadius $borderRadius 0 0 ;
-          font-size: 18px;
+          font-size: 16px;
           font-family: PingFang SC-Medium, PingFang SC;
           font-weight: 500;
-          color: #303133;
-          padding: 0 20px 0 16px;
+          color: #02FFF1;
+          padding: 0 20px 0 36px;
           box-sizing: border-box;
+          position: relative;
+          box-shadow: 0px 1px 0px 0px rgba(18,78,74,0.15);
+          &:before {
+            position: absolute;
+            content: '';
+            width: 2px;
+            height: 14px;
+            background: #02FFF1;
+            left: 24px;
+            top: 14px;
+          }
+          &:after {
+            position: absolute;
+            content: '';
+            width: 80%;
+            height: 1px;
+            background: linear-gradient(90deg, rgba(0, 163, 255, 1), rgba(0, 255, 255, 0));
+            left: 0;
+            bottom: 0;
+          }
           .__cdh-title {}
           .__cdh-slot {}
           .__cdh-close {
@@ -185,6 +211,8 @@
         display: flex;
         overflow-y: hidden;
         flex: 1;
+        background-color: #0E2F57;
+        border-radius: 0 0 $borderRadius $borderRadius;
         .__cus-dialog-main {
           width: 100%;
           display: flex;
@@ -205,33 +233,34 @@
               }
             }
             .__cus-dialog-foot_submit {
-              width: 72px;
-              height: 36px;
-              background: #0062E9;
+              background-color: #0085F7;
               border-radius: 4px;
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #FFFFFF;
+              border: 1px solid rgba(0,133,247,0.5);
               display: flex;
               align-items: center;
               justify-content: center;
+              padding: 0 10px;
+              height: 30px;
               box-sizing: border-box;
+              font-size: 16px;
+              font-family: PingFang SC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #FFFFFF;
             }
             .__cus-dialog-foot_cancel {
-              width: 72px;
-              height: 36px;
-              background: #F8F8F8;
-              border: 1px solid #E4E4E4;
+              background-color: rgba(0, 133, 247, 0.2);
               border-radius: 4px;
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #999999;
+              border: 1px solid rgba(0,133,247,0.5);
               display: flex;
               align-items: center;
               justify-content: center;
+              padding: 0 10px;
+              height: 30px;
               box-sizing: border-box;
+              font-size: 16px;
+              font-family: PingFang SC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #FFFFFF;
             }
           }
           &.isFull {
@@ -321,3 +350,102 @@
     }
   }
 }
+
+// 确认小弹窗
+.is-message-box {
+  .el-overlay-message-box {
+    .el-message-box {
+      background-color: #0E2F57;
+      border: none;
+      border-radius: 10px;
+      padding: 0;
+      .el-message-box__header {
+        padding: 0;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        background: linear-gradient(90deg, rgba(2, 255, 241, 0.2) 0%, rgba(2, 255, 241, 0) 100%);
+        position: relative;
+        box-shadow: 0px 1px 0px 0px rgba(18,78,74,0.15);
+        padding: 0 20px 0 36px;
+        .el-message-box__title {
+          font-size: 16px;
+          font-family: PingFang SC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #02FFF1;
+        }
+        .el-message-box__headerbtn {
+          margin-left: auto;
+          position: unset;
+          display: flex;
+          align-items: center;
+          >i {
+            color: #02FFF1;
+          }
+        }
+        &:before {
+          position: absolute;
+          content: '';
+          width: 2px;
+          height: 14px;
+          background: #02FFF1;
+          left: 24px;
+          top: 14px;
+        }
+        &:after {
+          position: absolute;
+          content: '';
+          width: 80%;
+          height: 1px;
+          background: linear-gradient(90deg, rgba(0, 163, 255, 1), rgba(0, 255, 255, 0));
+          left: 0;
+          bottom: 0;
+        }
+      }
+      .el-message-box__content {
+        font-size: 14px;
+        font-family: PingFang SC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        padding: 24px 40px 0;
+      }
+      .el-message-box__btns {
+        padding: 24px;
+        outline: none;
+        >button:hover {
+          opacity: 0.75;
+        }
+        >button:first-child {
+          background-color: rgba(0, 133, 247, 0.2);
+          border-radius: 4px;
+          border: 1px solid rgba(0,133,247,0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          height: 30px;
+          box-sizing: border-box;
+          font-size: 16px;
+          font-family: PingFang SC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+        >button:last-child {
+          background-color: #0085F7;
+          border-radius: 4px;
+          border: 1px solid rgba(0,133,247,0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          height: 30px;
+          box-sizing: border-box;
+          font-size: 16px;
+          font-family: PingFang SC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+}

src/views/system/notice-announcement/detail.vue

@@ -0,0 +1,103 @@
+<template>
+  <CusDialog
+      title="通知公告"
+      :show="show"
+      @close="$emit('update:show', false)"
+      @submit="onSubmit"
+      submitText="确认发布"
+      height="500px"
+  >
+    <div class="__normal-form">
+      <CusForm labelWidth="100px" ref="ref_form">
+        <CusFormColumn
+            :span="24"
+            required
+            label="标题:"
+            defaultErrorMsg="请输入标题"
+            v-model:param="cusDetail.p1"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="内容:"
+            defaultErrorMsg="请输入内容"
+            type="textarea"
+            :rows="8"
+            v-model:param="cusDetail.p2"/>
+        <CusFormColumn
+            :span="24"
+            required
+            label="操作类型:"
+            defaultErrorMsg="请选择操作类型"
+            link="select"
+            static
+            v-model:param="cusDetail.p3"
+            labelKey="label"
+            valueKey="value"
+            :options="[
+                {label: '类型一', value: '1'},
+                {label: '类型二', value: '2'},
+                {label: '类型三', value: '3'},
+            ]"/>
+        <CusFormColumn
+            :span="24"
+            label="上传文件:"
+            defaultErrorMsg="请选择文件"
+            link="upload"
+            v-model:param="cusDetail.fileList"/>
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    show: {},
+    transfer: {}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      cusDetail: {
+        p1: null,
+        p2: null,
+        p3: null,
+        fileList: [],
+      }
+    })
+    watch(() => props.show, (n) => {
+
+    })
+    const onSubmit = () => {
+
+    }
+    return {
+      ...toRefs(state),
+      onSubmit
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/system/notice-announcement/index.vue

@@ -53,8 +53,8 @@
           </CusForm>
         </template>
         <template #buttons>
-          <div class="__cus-button_submit __hover">
-            <SvgIcon name="export" size="16"/>导出
+          <div class="__cus-button_submit __hover" @click="onAdd">
+            <SvgIcon name="add" size="16"/>新增
           </div>
         </template>
         <template #table>
@@ -89,6 +89,7 @@
         </template>
       </CusContent>
     </div>
+    <DetailCom v-model:show="showDetail" :transfer="transfer"/>
   </div>
 </template>
 
@@ -107,10 +108,13 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import DetailCom from './detail.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    DetailCom
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
@@ -145,6 +149,8 @@ export default defineComponent({
         {value: "p1", label: "状态", show: true},
         {value: "do", label: "操作", show: true, width: 260},
       ],
+      showDetail: false,
+      transfer: {}
     });
     const ref_cusTable = ref()
     //  获取字典
@@ -216,6 +222,12 @@ export default defineComponent({
       state.queryPage.pageNum = 1
       handleSearch()
     }
+    const onAdd = () => {
+      state.transfer = {
+        method: 'add',
+      }
+      state.showDetail = true
+    }
     onMounted(() => {
       state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
       initDictionary()
@@ -229,6 +241,7 @@ export default defineComponent({
       handleSort,
       handleReset,
       onSearch,
+      onAdd
     }
   },
 })