|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <CzrDialog
|
|
|
+ :show="show"
|
|
|
+ title="选择模型"
|
|
|
+ @onClose="$emit('update:show', false)"
|
|
|
+ @onSubmit="onSubmit"
|
|
|
+ width="62.5rem"
|
|
|
+ height="auto"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="flex flex-col rounded-lg bg-[var(--czr-dialog-bg)] p-4"
|
|
|
+ v-loading="state.query.loading"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <CzrForm label-width="80px">
|
|
|
+ <CzrFormColumn
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="8"
|
|
|
+ label="模型类型"
|
|
|
+ v-model:param="state.query.form.modeType"
|
|
|
+ link="select"
|
|
|
+ :options="DictionaryStore.modelTypes.list"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="8"
|
|
|
+ label="可用状态"
|
|
|
+ v-model:param="state.query.form.kyStatus"
|
|
|
+ link="select"
|
|
|
+ :options="DictionaryStore.modelStatus"
|
|
|
+ />
|
|
|
+ <CzrFormColumn
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="8"
|
|
|
+ label-width="10px"
|
|
|
+ v-model:param="state.text"
|
|
|
+ placeholder="按名称搜索"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ />
|
|
|
+ </CzrForm>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-4 grid max-h-[600px] flex-1 grid-cols-1 gap-4 overflow-y-auto"
|
|
|
+ >
|
|
|
+ <template v-for="row in state.query.result.data">
|
|
|
+ <div
|
|
|
+ class="model cursor-pointer"
|
|
|
+ :class="{
|
|
|
+ active: state.selected?.id == row.id,
|
|
|
+ }"
|
|
|
+ @click="state.selected = row"
|
|
|
+ >
|
|
|
+ <div class="flex">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/model/model-default-logo.png"
|
|
|
+ class="mr-2.5 h-[3.25rem] w-[3.25rem]"
|
|
|
+ />
|
|
|
+ <div class="flex flex-1 flex-col justify-around overflow-hidden">
|
|
|
+ <div class="text-[1.25rem] font-bold text-[#2E3238]" v-title>
|
|
|
+ {{ row.name }}
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div
|
|
|
+ class="flex h-[1.25rem] items-center justify-center rounded-[0.13rem] bg-gradient-to-r from-[#FF9E2D] to-[#FFB92D] px-[0.38rem] text-[0.63rem] font-bold text-[#ffffff]"
|
|
|
+ >
|
|
|
+ {{ DictionaryStore.modelTypes.map.get(row.type) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-[0.25rem] ml-auto">
|
|
|
+ <div
|
|
|
+ v-if="row.status == 1"
|
|
|
+ class="rounded-xs bg-[var(--czr-success-color)] px-2.5 py-1 text-xs text-[#ffffff]"
|
|
|
+ >
|
|
|
+ 可用
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="rounded-xs bg-[#A7ADB9] px-2.5 py-1 text-xs text-[#ffffff]"
|
|
|
+ >
|
|
|
+ 需申请
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-2.5 mb-auto h-[3rem] text-sm text-[#606266]"
|
|
|
+ style="line-height: 1.4rem"
|
|
|
+ v-title="{ lines: 2 }"
|
|
|
+ >
|
|
|
+ {{ row.description }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-2 flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ {{ DictionaryStore.modelProvides.map.get(row.pluginClass) }}
|
|
|
+ </div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>(创建单位)</div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>{{ row.createNickName }}</div>
|
|
|
+ <div>|</div>
|
|
|
+ <div>{{ YMDHms(row.updateTime) }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-2 flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="__hover ml-auto text-xs text-[var(--czr-main-color)]"
|
|
|
+ @click.capture.stop="onSwitch(row)"
|
|
|
+ >
|
|
|
+ 查看详情
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="state.selected?.id == row.id">
|
|
|
+ <div
|
|
|
+ class="absolute top-0 right-0 h-[2rem] w-[2rem] bg-[url('@/assets/images/knowledge/checked.png')]"
|
|
|
+ ></div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <CzrDialog
|
|
|
+ :show="state.apply.show"
|
|
|
+ title="模型申请"
|
|
|
+ @onClose="state.apply.show = false"
|
|
|
+ @onSubmit="onApply"
|
|
|
+ width="42.5rem"
|
|
|
+ height="auto"
|
|
|
+ >
|
|
|
+ <div class="bm-form">
|
|
|
+ <CzrForm ref="ref_apply">
|
|
|
+ <div class="__czr-title_1">申请留言</div>
|
|
|
+ <CzrFormColumn
|
|
|
+ required
|
|
|
+ class="__czr-table-form-column"
|
|
|
+ :span="24"
|
|
|
+ label-width="0px"
|
|
|
+ v-model:param="state.apply.text"
|
|
|
+ type="textarea"
|
|
|
+ :rows="8"
|
|
|
+ />
|
|
|
+ </CzrForm>
|
|
|
+ </div>
|
|
|
+ </CzrDialog>
|
|
|
+ </CzrDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ getCurrentInstance,
|
|
|
+ nextTick,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+} from 'vue'
|
|
|
+import { debounce } from 'lodash'
|
|
|
+import { datasetsGetAllByPage } from '@/api/modules/knowledge'
|
|
|
+import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import { pluginGetInstanceList } from '@/api/modules/model'
|
|
|
+import { YMDHms } from '@/utils/czr-util'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import CzrDialog from '@/components/czr-ui/CzrDialog.vue'
|
|
|
+
|
|
|
+const DialogStore = useDialogStore()
|
|
|
+const DictionaryStore = useDictionaryStore()
|
|
|
+const emit = defineEmits(['update:show', 'refresh'])
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
+const props = defineProps({
|
|
|
+ show: { default: false },
|
|
|
+ transfer: <any>{},
|
|
|
+})
|
|
|
+const state: any = reactive({
|
|
|
+ selected: null,
|
|
|
+ text: '',
|
|
|
+ query: {
|
|
|
+ init: false,
|
|
|
+ loading: false,
|
|
|
+ page: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ formReal: {},
|
|
|
+ result: {
|
|
|
+ total: 0,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ apply: {
|
|
|
+ show: false,
|
|
|
+ text: '',
|
|
|
+ },
|
|
|
+})
|
|
|
+const ref_apply = ref()
|
|
|
+watch(
|
|
|
+ () => props.show,
|
|
|
+ (n) => {
|
|
|
+ if (n) {
|
|
|
+ state.selected = null
|
|
|
+ onSearch()
|
|
|
+ }
|
|
|
+ },
|
|
|
+)
|
|
|
+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 onSearch = () => {
|
|
|
+ state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
|
|
|
+ onPage(1, 100000)
|
|
|
+}
|
|
|
+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
|
|
|
+ state.query.result.data.forEach((v: any) => {
|
|
|
+ if (v.id == props.transfer.id) {
|
|
|
+ state.selected = v
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ .finally(() => {
|
|
|
+ state.query.loading = false
|
|
|
+ })
|
|
|
+}
|
|
|
+const onSubmit = () => {
|
|
|
+ if (!state.selected) {
|
|
|
+ ElMessage.warning('请选择模型！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (state.selected.status == 1) {
|
|
|
+ emit('refresh', state.selected)
|
|
|
+ emit('update:show', false)
|
|
|
+ } else {
|
|
|
+ state.apply.text = ''
|
|
|
+ state.apply.show = true
|
|
|
+ }
|
|
|
+}
|
|
|
+const onApply = () => {
|
|
|
+ ref_apply.value
|
|
|
+ .submit()
|
|
|
+ .then(() => {
|
|
|
+ DialogStore.confirm({
|
|
|
+ content: `请确认是否提交？`,
|
|
|
+ onSubmit: () => {
|
|
|
+ state.loading = true
|
|
|
+ state.apply.show = false
|
|
|
+ emit('refresh', state.selected)
|
|
|
+ emit('update:show', false)
|
|
|
+ },
|
|
|
+ onCancel: () => {},
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ ElMessage({
|
|
|
+ message: e[0].message,
|
|
|
+ grouping: true,
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ initDictionary()
|
|
|
+})
|
|
|
+const initDictionary = () => {
|
|
|
+ DictionaryStore.initModelTypes()
|
|
|
+ DictionaryStore.initModelProvides()
|
|
|
+}
|
|
|
+</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 1.5rem;
|
|
|
+ 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;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ &.active {
|
|
|
+ border-color: var(--czr-main-color);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CzRger