|
@@ -0,0 +1,331 @@
|
|
|
+<template>
|
|
|
+ <div class="bm-main-box">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="ml-auto flex items-center gap-2.5">
|
|
|
+ <CzrForm class="bm-filter" label-width="0px" @handleEnter="onSearch">
|
|
|
+ <CzrFormColumn
|
|
|
+ width="23rem"
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ label-width="0px"
|
|
|
+ v-model:param="state.query.form.time1"
|
|
|
+ link="datetime"
|
|
|
+ type="datetimerange"
|
|
|
+ placeholder="租户启用时间"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ width="23rem"
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ label-width="0px"
|
|
|
+ v-model:param="state.query.form.time2"
|
|
|
+ link="datetime"
|
|
|
+ type="datetimerange"
|
|
|
+ placeholder="租户到期时间"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ width="6.68rem"
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ label-width="0px"
|
|
|
+ v-model:param="state.query.form.status"
|
|
|
+ link="select"
|
|
|
+ :options="DictionaryStore.appStatus"
|
|
|
+ placeholder="租户状态"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ width="15.63rem"
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ label-width="0px"
|
|
|
+ v-model:param="state.text"
|
|
|
+ placeholder="输入关键词以检索"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ />
|
|
|
+ <CzrButton type="add" @click="onAdd" />
|
|
|
+ </CzrForm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-4 flex-1 overflow-hidden" v-loading="state.query.loading">
|
|
|
+ <CzrTableCard
|
|
|
+ class="table-card"
|
|
|
+ :page="state.query.page.pageNum"
|
|
|
+ :pageSize="state.query.page.pageSize"
|
|
|
+ :total="state.query.result.total"
|
|
|
+ :data="state.query.result.data"
|
|
|
+ @handlePage="onPage"
|
|
|
+ :col="4"
|
|
|
+ >
|
|
|
+ <template #model="{ row, index }">
|
|
|
+ <div
|
|
|
+ class="model __hover"
|
|
|
+ @click="
|
|
|
+ $router.push({
|
|
|
+ name: 'e16b6e20-4ea1-4160-9624-e775949b0c32',
|
|
|
+ params: {
|
|
|
+ id: row.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="flex">
|
|
|
+ <template v-if="row.icon">
|
|
|
+ <img :src="row.icon" class="mr-2.5 h-[3.25rem] w-[3.25rem]" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img
|
|
|
+ src="@/assets/images/app/app-default-logo.png"
|
|
|
+ class="mr-2.5 h-[3.25rem] w-[3.25rem]"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <div class="flex flex-1 flex-col overflow-hidden">
|
|
|
+ <div class="flex">
|
|
|
+ <template v-if="row.status == 0">
|
|
|
+ <div
|
|
|
+ class="rounded-xs bg-[#A7ADB9] px-2.5 py-1 text-xs text-white"
|
|
|
+ >
|
|
|
+ 草稿
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="row.status == 1">
|
|
|
+ <div
|
|
|
+ class="rounded-xs bg-[#5AD8A6] px-2.5 py-1 text-xs text-white"
|
|
|
+ >
|
|
|
+ 已发布
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="row.type == 0">
|
|
|
+ <div
|
|
|
+ class="ml-auto rounded-2xl bg-gradient-to-r from-[#C3E3FC] to-[#86C4FF] px-3 py-1 text-xs text-[#0876FF]"
|
|
|
+ >
|
|
|
+ 简洁
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="row.type == 1">
|
|
|
+ <div
|
|
|
+ class="ml-auto rounded-2xl bg-gradient-to-r from-[#E0DAFF] to-[#BABCFF] px-3 py-1 text-xs text-[#1E3F92]"
|
|
|
+ >
|
|
|
+ 高级
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-1.5 text-xl font-bold text-[#2E3238]"
|
|
|
+ style="line-height: 1.3"
|
|
|
+ v-title
|
|
|
+ >
|
|
|
+ {{ row.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-3 flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
|
|
|
+ >
|
|
|
+ <div>{{ row.userNickName }}</div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>{{ YMDHms(row.updateTime) }}</div>
|
|
|
+ <div class="ml-auto">
|
|
|
+ <el-dropdown :teleported="true">
|
|
|
+ <SvgIcon name="omit" />
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item @click="onCopy(row)">
|
|
|
+ 创建副本
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="onEdit(row)">
|
|
|
+ 设置
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="onDel(row)">
|
|
|
+ 删除
|
|
|
+ </el-dropdown-item>
|
|
|
+ <template v-if="row.status == 1">
|
|
|
+ <el-dropdown-item @click="onMonitor(row)">
|
|
|
+ 监测
|
|
|
+ </el-dropdown-item>
|
|
|
+ </template>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </CzrTableCard>
|
|
|
+ </div>
|
|
|
+ <!-- <detailCom-->
|
|
|
+ <!-- v-model:show="state.detail.show"-->
|
|
|
+ <!-- :transfer="state.detail.transfer"-->
|
|
|
+ <!-- @refresh="onSearch"-->
|
|
|
+ <!-- />-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { getCurrentInstance, onMounted, reactive, ref, watch } from 'vue'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import { debounce } from 'lodash'
|
|
|
+import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+// import detailCom from './detail.vue'
|
|
|
+import {
|
|
|
+ pluginDel,
|
|
|
+ pluginGetInstanceList,
|
|
|
+ pluginUpdateStatus,
|
|
|
+} from '@/api/modules/model'
|
|
|
+import { YMDHms } from '@/utils/czr-util'
|
|
|
+import SvgIcon from '@/components/SvgIcon/index.vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { appDel, appSearch } from '@/api/modules/app'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const AppStore = useAppStore()
|
|
|
+const DialogStore = useDialogStore()
|
|
|
+const DictionaryStore = useDictionaryStore()
|
|
|
+const emit = defineEmits([])
|
|
|
+const props = defineProps({})
|
|
|
+const { proxy }: any = getCurrentInstance()
|
|
|
+const state: any = reactive({
|
|
|
+ text: '',
|
|
|
+ query: {
|
|
|
+ init: false,
|
|
|
+ loading: false,
|
|
|
+ page: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ formReal: {},
|
|
|
+ result: {
|
|
|
+ total: 0,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ transfer: {},
|
|
|
+ },
|
|
|
+})
|
|
|
+const setText = debounce((v) => {
|
|
|
+ state.query.form.keyword = v
|
|
|
+}, 1000)
|
|
|
+watch(
|
|
|
+ () => state.text,
|
|
|
+ (n) => {
|
|
|
+ setText(n)
|
|
|
+ },
|
|
|
+)
|
|
|
+watch(
|
|
|
+ () => state.query.form,
|
|
|
+ (n) => {
|
|
|
+ if (state.query.init) {
|
|
|
+ onSearch()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { deep: true },
|
|
|
+)
|
|
|
+const onPage = (pageNum, pageSize) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ state.query.init = true
|
|
|
+ }, 100)
|
|
|
+ state.query.page = {
|
|
|
+ pageNum: pageNum,
|
|
|
+ pageSize: pageSize,
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ page: state.query.page.pageNum,
|
|
|
+ size: state.query.page.pageSize,
|
|
|
+ }
|
|
|
+ // 添加表单参数
|
|
|
+ for (const [k, v] of Object.entries(state.query.formReal)) {
|
|
|
+ if (proxy.$czrUtil.isValue(v)) {
|
|
|
+ params[k] = v
|
|
|
+ }
|
|
|
+ }
|
|
|
+ state.query.loading = true
|
|
|
+ appSearch(params)
|
|
|
+ .then(({ data }: any) => {
|
|
|
+ state.query.result.total = data.total
|
|
|
+ state.query.result.data = data.records
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ .finally(() => {
|
|
|
+ state.query.loading = false
|
|
|
+ })
|
|
|
+}
|
|
|
+const onSearch = () => {
|
|
|
+ state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
|
|
|
+ onPage(1, state.query.page.pageSize)
|
|
|
+}
|
|
|
+const onReset = () => {
|
|
|
+ state.query.page = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ }
|
|
|
+ state.query.form = {}
|
|
|
+ onSearch()
|
|
|
+}
|
|
|
+const onAdd = () => {
|
|
|
+ state.detail.transfer = {
|
|
|
+ mode: 'add',
|
|
|
+ }
|
|
|
+ state.detail.show = true
|
|
|
+}
|
|
|
+const onCopy = (row) => {
|
|
|
+ state.detail.transfer = {
|
|
|
+ mode: 'copy',
|
|
|
+ id: row.id,
|
|
|
+ }
|
|
|
+ state.detail.show = true
|
|
|
+}
|
|
|
+const onEdit = (row) => {
|
|
|
+ state.detail.transfer = {
|
|
|
+ mode: 'edit',
|
|
|
+ id: row.id,
|
|
|
+ }
|
|
|
+ state.detail.show = true
|
|
|
+}
|
|
|
+const onDel = (row: any) => {
|
|
|
+ DialogStore.confirm({
|
|
|
+ title: '删除确认',
|
|
|
+ content: `请确认是否删除`,
|
|
|
+ onSubmit: () => {
|
|
|
+ appDel(row.id)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success('删除成功!')
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ .finally(() => {
|
|
|
+ onSearch()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+const onMonitor = (row) => {
|
|
|
+ router.push({
|
|
|
+ name: 'a36ccd46-f399-4bf6-8db9-157ca8d3e8c8',
|
|
|
+ params: {
|
|
|
+ id: row.id,
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ initDictionary()
|
|
|
+ onReset()
|
|
|
+})
|
|
|
+const initDictionary = () => {}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.model {
|
|
|
+ width: 100%;
|
|
|
+ background-image: url('@/assets/images/model/model-icon-7.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 1rem;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40, 83, 247, 0.05);
|
|
|
+ border: var(--czr-border);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+</style>
|