消息中西

src/layout/menu/head/index.vue

@@ -24,6 +24,9 @@
     <!--        >临时字典</el-button-->
     <!--      >-->
     <!--    </div>-->
+    <div class="__hover mr-4">
+      <messageCom />
+    </div>
     <el-dropdown :disabled="AppStore.tenants.length < 2">
       <div class="__hover flex items-center gap-2 text-[#303133]">
         {{ AppStore.tenantInfo?.name }}
@@ -106,6 +109,7 @@ import { sysDict } from '@/api/modules/global/dictionary'
 import { copy } from '@/utils/czr-util'
 import { ElMessage } from 'element-plus'
 import { loginChangeTenant, loginLogout } from '@/api/modules/global/login'
+import messageCom from './message.vue'
 
 const AppStore = useAppStore()
 const DictionaryStore = useDictionaryStore()

src/layout/menu/head/message.vue

@@ -0,0 +1,324 @@
+<template>
+  <el-popover
+    placement="bottom-end"
+    :popper-style="{
+      padding: 0,
+      minWidth: 0,
+      width: 'fit-content',
+    }"
+  >
+    <template #reference>
+      <el-badge :is-dot="false">
+        <SvgIcon name="message" color="#303133" size="20" />
+      </el-badge>
+    </template>
+    <div class="w-[28rem] p-4">
+      <div class="mb-4 flex justify-center gap-8">
+        <template
+          v-for="tab in [
+            { label: '审批消息', value: tabsType.Approval },
+            { label: '通知消息', value: tabsType.Notice },
+          ]"
+        >
+          <el-badge
+            :max="99"
+            :value="state[tab.value].newCount"
+            :show-zero="false"
+          >
+            <div
+              class="__hover flex items-center justify-center rounded-sm border border-[var(--czr-main-color)] px-4 py-2 text-sm"
+              :class="
+                state.tab === tab.value
+                  ? 'bg-[var(--czr-main-color)] text-white'
+                  : 'text-[var(--czr-main-color)]'
+              "
+              @click="state.tab = tab.value"
+            >
+              {{ tab.label }}
+            </div>
+          </el-badge>
+        </template>
+      </div>
+      <template v-if="state[state.tab].data.length > 0">
+        <div class="flex max-h-100 flex-col gap-4 overflow-y-auto">
+          <template v-for="item in state[state.tab].data">
+            <template v-if="state.tab === tabsType.Approval">
+              <div
+                class="flex w-full flex-col gap-3 rounded-sm bg-[var(--czr-main-color)]/5 p-4"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-bold text-[#303133]"
+                >
+                  <template v-if="item.type === 'model'">
+                    <img src="@/assets/images/model/model-message-icon.png" />
+                    模型使用待审批
+                  </template>
+                  <template v-else-if="item.type === 'app'">
+                    <img src="@/assets/images/app/app-message-icon.png" />
+                    应用发布待审批
+                  </template>
+                </div>
+                <div class="text-sm text-[#606266]">申请人：xxx</div>
+                <div class="flex items-center gap-2.5 text-xs">
+                  <div
+                    class="__hover mr-auto text-[var(--czr-main-color)]"
+                    @click="onView(item)"
+                  >
+                    立即查看 >
+                  </div>
+                  <div
+                    class="__hover rounded-xs bg-[var(--czr-success-color)]/15 px-1.5 py-1 text-[var(--czr-success-color)]"
+                    @click="onPass(item)"
+                  >
+                    通过
+                  </div>
+                  <div
+                    class="__hover rounded-xs bg-[var(--czr-error-color)]/15 px-1.5 py-1 text-[var(--czr-error-color)]"
+                    @click="onNoPass(item)"
+                  >
+                    不通过
+                  </div>
+                </div>
+              </div>
+            </template>
+            <template v-else-if="state.tab === tabsType.Notice">
+              <div
+                class="flex w-full flex-col gap-3 rounded-sm bg-[var(--czr-main-color)]/5 p-4"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-bold text-[#303133]"
+                >
+                  <template v-if="item.type === 'model'">
+                    您申请使用的模型已审批通过
+                  </template>
+                  <template v-else-if="item.type === 'app'">
+                    您发布的应用已审批通过
+                  </template>
+                </div>
+                <div class="flex items-center gap-2.5 text-xs">
+                  <div class="__hover mr-auto text-[var(--czr-main-color)]">
+                    立即查看 >
+                  </div>
+                  <div class="__hover text-[#606266]">1999-45-92</div>
+                </div>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+      <template v-else>
+        <div class="w-full py-8 text-center">暂无数据</div>
+      </template>
+    </div>
+    <CzrDialog
+      :show="state[tabsType.Approval].showModel"
+      title="模型申请"
+      @onClose="state[tabsType.Approval].showModel = false"
+      :show-submit="false"
+      :show-close="false"
+      width="42.5rem"
+      height="auto"
+    >
+      <template #foot>
+        <div
+          class="__czr-dialog-foot_submit __hover"
+          @click="onPass(state[tabsType.Approval].form)"
+        >
+          通过
+        </div>
+        <div
+          class="__czr-dialog-foot_cancel __hover"
+          @click="onNoPass(state[tabsType.Approval].form)"
+        >
+          不通过
+        </div>
+      </template>
+      <div class="bm-form">
+        <CzrForm :form-view="true">
+          <div class="__czr-title_1">申请留言</div>
+          <CzrFormColumn
+            class="__czr-table-form-column"
+            :span="24"
+            label-width="0px"
+            v-model:param="state[tabsType.Approval].form.text"
+            type="textarea"
+            :rows="8"
+          />
+        </CzrForm>
+      </div>
+    </CzrDialog>
+    <CzrDialog
+      :show="state[tabsType.Approval].showApp"
+      title="应用发布申请"
+      @onClose="state[tabsType.Approval].showApp = false"
+      :show-submit="false"
+      :show-close="false"
+      width="62.5rem"
+      height="auto"
+      max-height="90%"
+    >
+      <template #foot>
+        <div
+          class="__czr-dialog-foot_submit __hover"
+          @click="toApp(state[tabsType.Approval].form)"
+        >
+          查看应用
+        </div>
+        <div
+          class="__czr-dialog-foot_submit __hover"
+          @click="onPass(state[tabsType.Approval].form)"
+        >
+          通过
+        </div>
+        <div
+          class="__czr-dialog-foot_cancel __hover"
+          @click="onNoPass(state[tabsType.Approval].form)"
+        >
+          不通过
+        </div>
+      </template>
+      <div class="bm-form">
+        <CzrForm ref="ref_form" :form-view="true" layout="y">
+          <CzrFormColumn
+            :span="24"
+            label="应用名称"
+            v-model:param="state[tabsType.Approval].form.name"
+          />
+          <CzrFormColumn
+            :span="24"
+            v-model:param="state[tabsType.Approval].form.type"
+            link="radio"
+            :options="DictionaryStore.appTypes"
+          >
+            <template #label>
+              应用类型
+              <el-tooltip
+                content="简介：选择模型即可使用<br/>高级：需配置应用工作流才可使用"
+                :raw-content="true"
+                placement="top"
+              >
+                <SvgIcon name="czr_tip" size="14" class="ml-2" />
+              </el-tooltip>
+            </template>
+          </CzrFormColumn>
+          <CzrFormColumn
+            :span="24"
+            label="应用介绍"
+            v-model:param="state[tabsType.Approval].form.description"
+            type="textarea"
+            :rows="4"
+          />
+          <CzrFormColumn
+            :span="24"
+            label="图标"
+            v-model:param="state.icon"
+            link="upload"
+            type="img"
+            uploadLayout="card"
+            :limit="1"
+            :defaultImg="defaultImg"
+            :class="{ empty: state.icon.length === 0 }"
+          />
+          <template v-if="state.icon.length === 0">
+            <img :src="defaultImg" class="size-32" />
+          </template>
+          <div class="__czr-title_1">申请留言</div>
+          <CzrFormColumn
+            class="__czr-table-form-column"
+            :span="24"
+            label-width="0px"
+            v-model:param="state[tabsType.Approval].form.text"
+            type="textarea"
+            :rows="8"
+          />
+        </CzrForm>
+      </div>
+    </CzrDialog>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useDialogStore, useDictionaryStore } from '@/stores'
+import defaultImg from '@/assets/images/app/app-default-logo.png'
+
+const DialogStore = useDialogStore()
+const DictionaryStore = useDictionaryStore()
+enum tabsType {
+  Approval = 'approval',
+  Notice = 'notice',
+}
+const state: any = reactive({
+  tab: tabsType.Approval,
+  [tabsType.Approval]: {
+    newCount: 0,
+    data: [
+      { type: 'app' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+    ],
+    form: {},
+    showModel: false,
+    showApp: false,
+  },
+  [tabsType.Notice]: {
+    newCount: 0,
+    data: [
+      { type: 'app' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+      { type: 'model' },
+    ],
+    form: {},
+    show: false,
+  },
+  icon: [
+    // {
+    //   url: 'http://8.130.72.63:18077/dataset/1760153238262_011998d6-401a-46e5-bf48-1236732a50cc.jpeg',
+    // },
+  ],
+})
+const onPass = (row) => {
+  DialogStore.confirm({
+    content: `请确认是否通过？`,
+    onSubmit: () => {
+      state[tabsType.Approval].showModel = false
+      state[tabsType.Approval].showApp = false
+    },
+  })
+}
+const onNoPass = (row) => {
+  DialogStore.confirm({
+    content: `请确认是否不通过？`,
+    onSubmit: () => {
+      state[tabsType.Approval].showModel = false
+      state[tabsType.Approval].showApp = false
+    },
+  })
+}
+const onView = (row) => {
+  state[tabsType.Approval].form = JSON.parse(JSON.stringify(row))
+  if (row.type === 'model') {
+    state[tabsType.Approval].showModel = true
+  } else if (row.type === 'app') {
+    state[tabsType.Approval].showApp = true
+  }
+}
+const toApp = (row) => {}
+</script>
+
+<style lang="scss" scoped>
+:deep(.empty) {
+  .el-form-item {
+    min-height: 0;
+    margin-bottom: 0;
+  }
+}
+</style>