Browse Source

删除提示

CzRger 2 months ago
parent
commit
5fbe75f7f7

+ 1 - 0
src/App.vue

@@ -3,6 +3,7 @@
     <el-config-provider :locale="zhCn">
       <router-view/>
     </el-config-provider>
+    <CzrConfirm :global="true"/>
   </div>
 </template>
 

BIN
src/assets/images/dialog-bg.png


BIN
src/assets/images/login-bg.png


BIN
src/assets/images/taiji-logo.png


+ 8 - 0
src/assets/svg/tips.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1748398472821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3615"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path
+    d="M512 64C264.597333 64 64 264.597333 64 512s200.597333 448 448 448 448-200.597333 448-448S759.402667 64 512 64z m32 664a8.021333 8.021333 0 0 1-8 8h-48a8.021333 8.021333 0 0 1-8-8v-272c0-4.394667 3.605333-8 8-8h48c4.394667 0 8 3.605333 8 8v272zM512 384a48 48 0 1 1 0.021333-96.021333A48 48 0 0 1 512 384z"
+    p-id="3616"></path>
+</svg>

+ 5 - 3
src/components/SvgIcon/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <svg aria-hidden="true" class="svg-icon" :style="`width: ${size}px;height: ${size}px;transform: rotate(${rotate}deg);`">
-    <use :xlink:href="symbolId" :fill="colorCpt" />
-  </svg>
+  <div>
+    <svg aria-hidden="true" class="svg-icon" :style="`width: ${size}px;height: ${size}px;transform: rotate(${rotate}deg);`">
+      <use :xlink:href="symbolId" :fill="colorCpt" />
+    </svg>
+  </div>
 </template>
 
 

+ 68 - 0
src/components/czr-ui/CzrConfirm.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    modal-class="__czr-confirm-dialog"
+    v-bind="$attrs"
+    v-model="DialogStore.confirmParam.show"
+    align-center
+    :show-close="false"
+    :append-to-body="true"
+    :width="width"
+  >
+    <div class="__czr-confirm">
+      <div class="__czr-confirm-head">
+        <div>{{DialogStore.confirmParam.title}}</div>
+        <div class="__hover" @click="CDClose">
+          <SvgIcon name="czr_close" size="14" color="#909399"/>
+        </div>
+      </div>
+      <div class="__czr-confirm-content">
+        <div>
+          <SvgIcon name="tips" size="20" :active="true"/>
+        </div>
+        <div v-html="DialogStore.confirmParam.content"/>
+      </div>
+      <div class="__czr-confirm-foot">
+        <div class="__czr-dialog-foot_submit __hover" @click="CDSubmit">确认</div>
+        <div class="__czr-dialog-foot_cancel __hover" @click="CDClose">取消</div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {useDialogStore} from "@/stores";
+
+defineOptions({
+  name: 'CzrConfirm',
+});
+import {
+  reactive,
+} from 'vue'
+
+const DialogStore = useDialogStore()
+const props = defineProps({
+  global: {default: false},
+  show: {type: Boolean},
+  title: {default: ''},
+  width: {default: '31.25rem'},
+})
+const state = reactive({
+})
+
+const CDClose = () => {
+  DialogStore.$patch((s: any) => {
+    s.confirmParam.show = false
+  })
+  DialogStore.confirmParam.onCancel()
+}
+const CDSubmit = () => {
+  DialogStore.$patch((s: any) => {
+    s.confirmParam.show = false
+  })
+  DialogStore.confirmParam.onSubmit()
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

+ 2 - 2
src/components/czr-ui/CzrDialog.vue

@@ -63,7 +63,7 @@ import {
 } from 'vue'
 import {ElMessage, ElMessageBox} from "element-plus";
 import { v4 } from "uuid";
-import {useDialogLevelStore} from "@/stores";
+import {useDialogStore} from "@/stores";
 
 const emit = defineEmits(['onSubmit', 'update:show', 'onClose'])
 const props = defineProps({
@@ -97,7 +97,7 @@ const props = defineProps({
     default: false
   }
 })
-const DialogLevelStore = useDialogLevelStore()
+const DialogLevelStore = useDialogStore()
 const state = reactive({
   showDialog: false,
   closeConfirmTextTemp: {

+ 1 - 1
src/stores/index.ts

@@ -1,3 +1,3 @@
-export * from './modules/dialog-level'
+export * from './modules/dialog'
 export * from './modules/menu'
 export * from './modules/workflow'

+ 18 - 2
src/stores/modules/dialog-level.ts

@@ -1,8 +1,15 @@
 import {defineStore} from "pinia";
 
-export const useDialogLevelStore = defineStore('dialogLevel', {
+export const useDialogStore = defineStore('dialog', {
   state: () => ({
-    dialogShows: <any>[]
+    dialogShows: <any>[],
+    confirmParam: <any>{
+      show: false,
+      title: '提示',
+      content: '',
+      onSubmit: () => {},
+      onCancel: () => {},
+    }
   }),
   getters: {
   },
@@ -21,5 +28,14 @@ export const useDialogLevelStore = defineStore('dialogLevel', {
         newDom.style.display = 'unset'
       }
     },
+    confirm({title, content, onSubmit, onCancel = () => {}}) {
+      this.confirmParam = {
+        show: true,
+        title: title || '提示',
+        content,
+        onSubmit: onSubmit,
+        onCancel: onCancel
+      }
+    }
   },
 })

+ 88 - 29
src/style/czr.scss

@@ -195,35 +195,6 @@
             align-items: center;
             box-sizing: border-box;
             gap: 10px;
-            .__czr-dialog-foot_submit {
-              width: 61px;
-              height: 28px;
-              background: var(--czr-main-color);
-              border-radius: 4px;
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: #FFFFFF;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              box-sizing: border-box;
-            }
-            .__czr-dialog-foot_cancel {
-              width: 61px;
-              height: 28px;
-              background: #ffffff;
-              border: 1px solid var(--czr-main-color);
-              border-radius: 4px;
-              font-size: 14px;
-              font-family: Microsoft YaHei;
-              font-weight: 400;
-              color: var(--czr-main-color);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              box-sizing: border-box;
-            }
           }
           &.isFull {
             overflow-y: auto;
@@ -335,3 +306,91 @@
     }
   }
 }
+
+.__czr-confirm-dialog {
+  .el-dialog {
+    padding: 0;
+    background-color: transparent;
+    .el-dialog__header {
+      display: none;
+    }
+    .__czr-confirm {
+      background-image: url("@/assets/images/dialog-bg.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      border-radius: 0.4rem;
+      display: flex;
+      flex-direction: column;
+      .__czr-confirm-head {
+        width: 100%;
+        height: 3.13rem;
+        background-color: rgba(255,255,255,0.8);
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+        border-radius: 0.4rem 0.4rem 0 0;
+        >div:nth-child(1) {
+          font-weight: bold;
+          font-size: 1.13rem;
+          color: #303133;
+        }
+        >div:nth-child(2) {
+          margin-left: auto;
+        }
+      }
+      .__czr-confirm-content {
+        margin: 1rem 1.5rem 0;
+        padding: 1rem;
+        background: rgba(255,255,255,0.8);
+        border-radius: 0.5rem;
+        display: flex;
+        >div:nth-child(1) {
+          margin-right: 0.75rem;
+        }
+        >div:nth-child(2) {
+          flex: 1;
+          font-weight: bold;
+          font-size: 1rem;
+          color: #333333;
+        }
+      }
+      .__czr-confirm-foot {
+        margin: 1.5rem 0;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+      }
+    }
+  }
+}
+
+.__czr-dialog-foot_submit {
+  border: 1px solid var(--czr-main-color);
+  width: 5rem;
+  height: 2rem;
+  background: var(--czr-main-color);
+  border-radius: 0.25rem;
+  font-size: 0.88rem;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1rem;
+}
+.__czr-dialog-foot_cancel {
+  border: 1px solid var(--czr-main-color);
+  width: 5rem;
+  height: 2rem;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  font-size: 0.88rem;
+  color: var(--czr-main-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1rem;
+}

+ 18 - 1
src/views/global/login/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="login">
+    <img class="logo" src="@/assets/images/taiji-logo.png">
     <div class="login-main">
 
     </div>
@@ -19,6 +20,22 @@ const state: any = reactive({})
 .login {
   width: 100%;
   height: 100vh;
-  background-color: red;
+  background-image: url("@/assets/images/login-bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  .logo {
+    position: absolute;
+    top: 2.75rem;
+    left: 3.88rem;
+    width: 17.25rem;
+    height: 2.63rem;
+  }
+  .login-main {
+    position: absolute;
+    right: 0;
+    top: 0;
+
+  }
 }
 </style>

+ 13 - 46
src/views/manage/knowledge/index.vue

@@ -86,7 +86,7 @@
                   <SvgIcon name="czr_edit" size="14" class="__hover ml-auto"/>
                 </el-tooltip>
                 <el-tooltip content="删除" effect="light" placement="top">
-                  <SvgIcon name="czr_del" size="16" class="__hover"/>
+                  <SvgIcon name="czr_del" size="16" class="__hover" @click="onDel(info)"/>
                 </el-tooltip>
                 <el-tooltip :content="info.p7 ? '取消收藏' : '收藏'" effect="light" placement="top">
                   <SvgIcon name="star" size="15" class="__hover" :active="!!info.p7"/>
@@ -104,7 +104,10 @@
 import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
 import { Search } from '@element-plus/icons-vue'
 import {debounce} from "lodash";
+import {useDialogStore} from "@/stores";
+import {ElMessage} from "element-plus";
 
+const DialogStore = useDialogStore();
 const emits = defineEmits([])
 const props = defineProps({})
 const {proxy}: any = getCurrentInstance()
@@ -126,7 +129,7 @@ const state: any = reactive({
   detail: {
     show: false,
     transfer: {}
-  }
+  },
 })
 const setText = debounce((v) => {
   state.query.form.name = v
@@ -209,50 +212,14 @@ const onEdit = (row) => {
   }
   state.detail.show = true
 }
-const onDel = (row = null) => {
-  // if (row) {
-  //   ElMessageBox.confirm(`<span class="__cus-del-sub-text">请确认是否删除${row.manifestNumber}?<br/><span>删除之后无法恢复该数据!</span></span>`, "提示", {
-  //     confirmButtonText: "是",
-  //     cancelButtonText: "否",
-  //     type: "warning",
-  //     dangerouslyUseHTMLString: true,
-  //   } as any).then(() => {
-  //     state.query.loading = true
-  //     delRuleLogisticsDataSubscribeInfo(row.id).then(res => {
-  //       if (res.code == 200) {
-  //         ElMessage.success('删除成功!')
-  //         onSearch()
-  //       } else {
-  //         ElMessage.error(res.msg)
-  //       }
-  //     })
-  //   }).catch(() => {
-  //     state.query.loading = false
-  //   })
-  // } else {
-  //   if (state.query.selected.length == 0) {
-  //     ElMessage.warning('请至少选择一条记录!')
-  //     return
-  //   }
-  //   ElMessageBox.confirm(`<span class="__cus-del-sub-text">请确认是否删除${state.query.selected.length}条记录?<br/><span>删除之后无法恢复该数据!</span></span>`, "提示", {
-  //     confirmButtonText: "是",
-  //     cancelButtonText: "否",
-  //     type: "warning",
-  //     dangerouslyUseHTMLString: true,
-  //   } as any).then(() => {
-  //     state.query.loading = true
-  //     delRuleLogisticsDataSubscribeInfo(state.query.selected.map(v => v.id).join(',')).then(res => {
-  //       if (res.code == 200) {
-  //         ElMessage.success('删除成功!')
-  //         onSearch()
-  //       } else {
-  //         ElMessage.error(res.msg)
-  //       }
-  //     })
-  //   }).catch(() => {
-  //     state.query.loading = false
-  //   })
-  // }
+const onDel = (row: any) => {
+  DialogStore.confirm({
+    title: '删除确认',
+    content: `${row.p6}个应用正在使用该大模型,请确认是否删除`,
+    onSubmit: () => {
+      ElMessage.success('删除成功!')
+    }
+  })
 }
 
 const initDictionary = () => {