big-model-web/src/views/manage/app/index.vue

<template>
  <div class="bm-main-box">
    <div class="flex items-center">
      <div class="bm-main-box-title">{{ $route.meta.title }}</div>
      <div class="ml-auto flex items-center gap-[var(--czr-gap)]">
        <CzrForm class="bm-filter" label-width="0px" @handleEnter="onSearch">
          <CzrFormColumn
            width="6.68rem"
            class="__czr-table-form-column"
            :span="24"
            label-width="0px"
            v-model:param="state.query.form.modeType"
            link="select"
            :options="[]"
            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="[]"
            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-[1rem] 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: 'a36ccd46-f399-4bf6-8db9-157ca8d3e8c8',
                params: {
                  id: row.id,
                },
              })
            "
          >
            <div class="flex">
              <img
                src="@/assets/images/app/app-default-logo.png"
                class="mr-[var(--czr-gap)] h-[3.25rem] w-[3.25rem]"
              />
              <div class="flex flex-1 flex-col justify-between overflow-hidden">
                <div class="flex">
                  <template v-if="index % 2 === 0">
                    <div
                      class="rounded-xs bg-[#5AD8A6] px-2.5 py-1 text-xs text-white"
                    >
                      已发布
                    </div>
                    <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>
                    <div
                      class="rounded-xs bg-[#A7ADB9] px-2.5 py-1 text-xs text-white"
                    >
                      草稿
                    </div>
                    <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="text-[1.25rem] font-bold text-[#2E3238]" v-title>
                  {{ row.name }}
                </div>
              </div>
            </div>
            <div
              class="mt-3 flex items-center gap-[var(--czr-gap)] text-[0.75rem] text-[#6F7889]"
            >
              <div>(用户名称)</div>
              <div>|</div>
              <div>(时间)</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
                      >
                      <el-dropdown-item @click="onMonitor(row)"
                        >监测(发布的才有)</el-dropdown-item
                      >
                    </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'

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
  pluginGetInstanceList(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: () => {
      // pluginDel(row.id)
      //   .then(() => {
      //     ElMessage.success('删除成功！')
      //   })
      //   .catch(() => {})
      //   .finally(() => {
      //     onSearch()
      //   })
    },
  })
}
const onMonitor = (row) => {}
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: var(--czr-gap);
  box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40, 83, 247, 0.05);
  border: var(--czr-border);
  display: flex;
  flex-direction: column;
}
</style>