|
|
@ -9,7 +9,7 @@
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-form-item label="物种名称">
|
|
|
|
<el-form-item label="物种名称">
|
|
|
|
<el-input
|
|
|
|
<el-input
|
|
|
|
v-model="queryParams.userName"
|
|
|
|
v-model="queryParams.speciesName"
|
|
|
|
placeholder="请输入物种名称"
|
|
|
|
placeholder="请输入物种名称"
|
|
|
|
clearable
|
|
|
|
clearable
|
|
|
|
@keyup.enter="handleQuery"
|
|
|
|
@keyup.enter="handleQuery"
|
|
|
@ -17,13 +17,10 @@
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-form-item label="属类">
|
|
|
|
<el-form-item label="所属界">
|
|
|
|
<el-input
|
|
|
|
<el-select v-model="queryParams.kingdomId" filterable clearable @change="selPhylum">
|
|
|
|
v-model="queryParams.userName"
|
|
|
|
<el-option v-for="item in options.kingdomInfo" :label="item.label" :value="item.value"></el-option>
|
|
|
|
placeholder="请输入属类"
|
|
|
|
</el-select>
|
|
|
|
clearable
|
|
|
|
|
|
|
|
@keyup.enter="handleQuery"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-col :span="6">
|
|
|
@ -36,31 +33,42 @@
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
<el-button type="primary" icon="Plus" @click="toAdd">上传基因型数据</el-button>
|
|
|
|
<el-button type="primary" icon="Plus" @click="toAdd">上传基因型数据</el-button>
|
|
|
|
<el-button type="primary" icon="Download" @click="exportExcel">导出Excel</el-button>
|
|
|
|
|
|
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
|
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" border>
|
|
|
|
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" border>
|
|
|
|
<el-table-column label="图片" align="center" key="userId" prop="userId" v-if="columns[0].visible">
|
|
|
|
<el-table-column label="图片" align="center" key="thumbnailUrl" prop="thumbnailUrl" v-if="columns[0].visible"
|
|
|
|
|
|
|
|
width="120">
|
|
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
|
|
<el-image :src="scope.row.thumbnailUrl" style="width: 100px; height: 100px;"
|
|
|
|
|
|
|
|
:preview-src-list="[scope.row.thumbnailUrl]"></el-image>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column label="物种" align="center" key="speciesName" prop="speciesName" v-if="columns[1].visible"
|
|
|
|
|
|
|
|
:show-overflow-tooltip="true" width="120"/>
|
|
|
|
|
|
|
|
<el-table-column label="属类" align="center" key="genus" prop="genus" v-if="columns[2].visible"
|
|
|
|
|
|
|
|
:show-overflow-tooltip="true">
|
|
|
|
<template #default="scope">
|
|
|
|
<template #default="scope">
|
|
|
|
<el-image :src="scope.row.avatar" style="width: 100px; height: 100px;" :preview-src-list="[scope.row.avatar]"></el-image>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
{{ `${scope.row.phylumName || '--'} / ${scope.row.className || '--'} / ${scope.row.orderName || '--'} / ${scope.row.familyName || '--'} / ${scope.row.genusName || '--'}` }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="物种" align="center" key="userName" prop="userName" v-if="columns[1].visible"
|
|
|
|
<el-table-column label="所属界" align="center" key="kingdomName" prop="kingdomName" v-if="columns[3].visible"
|
|
|
|
:show-overflow-tooltip="true"/>
|
|
|
|
:show-overflow-tooltip="true" width="90"/>
|
|
|
|
<el-table-column label="属类" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
|
|
|
|
<el-table-column label="创建人" align="center" key="createUserName" prop="createUserName"
|
|
|
|
:show-overflow-tooltip="true"/>
|
|
|
|
|
|
|
|
<el-table-column label="所属界" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible"
|
|
|
|
|
|
|
|
:show-overflow-tooltip="true"/>
|
|
|
|
|
|
|
|
<el-table-column label="创建人" align="center" key="phonenumber" prop="phonenumber"
|
|
|
|
|
|
|
|
v-if="columns[4].visible" width="120"/>
|
|
|
|
v-if="columns[4].visible" width="120"/>
|
|
|
|
<el-table-column label="创建时间" align="center" key="phonenumber" prop="phonenumber"
|
|
|
|
<el-table-column label="创建时间" align="center" key="createTime" prop="createTime"
|
|
|
|
v-if="columns[5].visible" width="120"/>
|
|
|
|
v-if="columns[5].visible" width="180">
|
|
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
|
|
|
|
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
|
|
|
|
<template #default="scope">
|
|
|
|
<template #default="scope">
|
|
|
|
<el-button link type="primary" @click="toView(scope.row)">详情</el-button>
|
|
|
|
<el-link type="info" @click="toView(scope.row)">详情</el-link>
|
|
|
|
<el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
|
|
|
|
<el-link type="primary" class="operate-edit" @click="toEdit(scope.row)">编辑</el-link>
|
|
|
|
<el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
|
<el-link type="danger" @click="handleDelete(scope.row)">删除</el-link>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<template #empty>
|
|
|
|
<template #empty>
|
|
|
@ -81,39 +89,64 @@
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<left-drawer v-model="showView" title="设备详情" width="35%">
|
|
|
|
<left-drawer v-model="showView" title="上传基因型数据" width="40%">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<title-divider title="基本信息"/>
|
|
|
|
|
|
|
|
<el-form :model="formData" ref="formRef" :rules="rules" label-width="90px">
|
|
|
|
|
|
|
|
<el-form-item label="物种名称" prop="speciesName">
|
|
|
|
|
|
|
|
{{ formData.speciesName }}
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="所属界" prop="kingdomId">
|
|
|
|
|
|
|
|
{{ formData.kingdomName }}
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="物种属类" prop="genus">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<el-form :model="formData" ref="formRef">
|
|
|
|
{{ `${formData.phylumName || '--'} / ${formData.className || '--'} / ${formData.orderName || '--'} / ${formData.familyName || '--'} / ${formData.genusName || '--'}` }}
|
|
|
|
<el-form-item label="所属基地/资源圃:" prop="baseName">
|
|
|
|
</div>
|
|
|
|
<div>{{ formData.baseName }}</div>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="物种图片" prop="thumbnailUrl">
|
|
|
|
|
|
|
|
<div class="avatar-uploader-image">
|
|
|
|
|
|
|
|
<el-image :src="formData.thumbnailUrl" style="width: 130px;height: 130px"></el-image>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
<el-tabs v-model="currentTabs">
|
|
|
|
|
|
|
|
<el-tab-pane label="Genome" :name="1">
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
<el-tab-pane label="Annotation" :name="2">
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
<el-tab-pane label="Molecular maker" :name="3">
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
<el-tab-pane label="Gene Expression Level (FPKM) Data" :name="4">
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template #footer>
|
|
|
|
<template #footer>
|
|
|
|
<el-button @click="showView = false">关闭</el-button>
|
|
|
|
<el-button @click="showView = false">关闭</el-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</left-drawer>
|
|
|
|
</left-drawer>
|
|
|
|
<left-drawer v-model="showGenoForm" title="上传基因型数据" width="35%">
|
|
|
|
<left-drawer v-model="showGenoForm" title="上传基因型数据" width="40%">
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<title-divider title="基本信息"/>
|
|
|
|
<title-divider title="基本信息"/>
|
|
|
|
<el-form :model="formData" ref="formRef">
|
|
|
|
<el-form :model="formData" ref="formRef" :rules="rules">
|
|
|
|
<el-form-item label="物种名称">
|
|
|
|
<el-form-item label="物种名称" prop="speciesName">
|
|
|
|
<el-input placeholder="请输入物种名称"></el-input>
|
|
|
|
<el-input placeholder="请输入物种名称" v-model="formData.speciesName"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="所属界" prop="baseName">
|
|
|
|
<el-form-item label="所属界" prop="kingdomId">
|
|
|
|
<el-select v-model="queryParams.areaCode" filterable clearable>
|
|
|
|
<el-select v-model="formData.kingdomId" filterable clearable @change="selPhylum">
|
|
|
|
<el-option v-for="item in data.pcTextArr" :label="item.label" :value="item.value"></el-option>
|
|
|
|
<el-option v-for="item in options.kingdomInfo" :label="item.label" :value="item.value"></el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="物种属类" prop="baseName">
|
|
|
|
<el-form-item label="物种属类" prop="genus">
|
|
|
|
<el-select v-model="queryParams.areaCode" filterable clearable>
|
|
|
|
<el-cascader ref="cascaderRef" :props="cascaderProps" v-model="formData.genus" :options="options.genusInfo"
|
|
|
|
<el-option v-for="item in data.pcTextArr" :label="item.label" :value="item.value"></el-option>
|
|
|
|
style="width: 100%"/>
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="物种图片" prop="baseName">
|
|
|
|
<el-form-item label="物种图片" prop="thumbnailUrl">
|
|
|
|
<div v-if="formData.tempFileImage" class="avatar-uploader-image">
|
|
|
|
<div v-if="formData.thumbnailUrl" class="avatar-uploader-image">
|
|
|
|
<div class="image" @click="delete formData.tempFileImage"><i-close theme="outline" size="24" fill="#FFFFFF"/></div>
|
|
|
|
<div class="image" @click="delFile">
|
|
|
|
<el-image :src="formData.tempFileImage" style="width: 130px;height: 130px"></el-image>
|
|
|
|
<i-close theme="outline" size="24" fill="#FFFFFF"/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<el-image :src="formData.thumbnailUrl" style="width: 130px;height: 130px"></el-image>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-upload
|
|
|
|
<el-upload
|
|
|
|
v-else
|
|
|
|
v-else
|
|
|
@ -124,7 +157,7 @@
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div class="avatar-uploader">
|
|
|
|
<div class="avatar-uploader">
|
|
|
|
<div class="avatar-uploader-icon">
|
|
|
|
<div class="avatar-uploader-icon">
|
|
|
|
<i-upload theme="outline" size="24" :fill="theme"/>
|
|
|
|
<svg-icon class-name="upload-icon" icon-class="upload" :color="theme"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div :style="{color:theme}">请上传</div>
|
|
|
|
<div :style="{color:theme}">请上传</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -132,22 +165,15 @@
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<el-tabs v-model="currentTabs">
|
|
|
|
<el-tabs v-model="currentTabs">
|
|
|
|
<el-tab-pane label="Genome" :name="1">
|
|
|
|
<el-tab-pane label="Genome" :name="1"/>
|
|
|
|
<upload-geno></upload-geno>
|
|
|
|
<el-tab-pane label="Annotation" :name="2"/>
|
|
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="Molecular maker" :name="3"/>
|
|
|
|
<el-tab-pane label="Annotation" :name="2">
|
|
|
|
<el-tab-pane label="Gene Expression Level (FPKM) Data" :name="4"/>
|
|
|
|
<upload-geno></upload-geno>
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
<el-tab-pane label="Molecular maker" :name="3">
|
|
|
|
|
|
|
|
<upload-geno></upload-geno>
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
<el-tab-pane label="Gene Expression Level (FPKM) Data" :name="4">
|
|
|
|
|
|
|
|
<upload-geno></upload-geno>
|
|
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
<upload-geno v-model="formData.tFiles" :gene-file-type="currentTabs" @uploadSuccess="uploadSuccess" @del-file="delFileGeno" ref="uploadGenoRef"></upload-geno>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template #footer>
|
|
|
|
<template #footer>
|
|
|
|
<el-button type="primary" :loading="loading" @click="saveMassif">保存</el-button>
|
|
|
|
<el-button type="primary" :loading="submitLoading" @click="saveGeno">保存</el-button>
|
|
|
|
<el-button @click="showGenoForm = false">取消</el-button>
|
|
|
|
<el-button @click="showGenoForm = false">取消</el-button>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</left-drawer>
|
|
|
|
</left-drawer>
|
|
|
@ -155,27 +181,30 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup name="User">
|
|
|
|
<script setup name="User">
|
|
|
|
import {
|
|
|
|
|
|
|
|
changeUserStatus,
|
|
|
|
|
|
|
|
listUser,
|
|
|
|
|
|
|
|
resetUserPwd,
|
|
|
|
|
|
|
|
delUser,
|
|
|
|
|
|
|
|
getUser,
|
|
|
|
|
|
|
|
updateUser,
|
|
|
|
|
|
|
|
addUser,
|
|
|
|
|
|
|
|
deptTreeSelect
|
|
|
|
|
|
|
|
} from "@/api/system/user";
|
|
|
|
|
|
|
|
import TitleDivider from "@/components/titleDivider/index.vue";
|
|
|
|
import TitleDivider from "@/components/titleDivider/index.vue";
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
import UploadGeno from "@/views/genoTypeData/genoManage/uploadGeno.vue";
|
|
|
|
import UploadGeno from "@/views/genoTypeData/genoManage/uploadGeno.vue";
|
|
|
|
import {fileToBlobURL} from "@/utils/ruoyi.js";
|
|
|
|
import {fileToBlobURL, handleTree} from "@/utils/ruoyi.js";
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
addGeno, delGeno, editGeno,
|
|
|
|
|
|
|
|
selClassInfo,
|
|
|
|
|
|
|
|
selFamilyInfo, selGenoById, selGenoPage,
|
|
|
|
|
|
|
|
selGenusInfo,
|
|
|
|
|
|
|
|
selKingdomInfo, selOrderInfo,
|
|
|
|
|
|
|
|
selPhylumInfo
|
|
|
|
|
|
|
|
} from "@/api/basicData/genoManageApi.js";
|
|
|
|
|
|
|
|
import {ElMessageBox} from "element-plus";
|
|
|
|
|
|
|
|
import EventBus from "@/utils/EventBus.js";
|
|
|
|
|
|
|
|
import {isArray} from "@/utils/validate.js";
|
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
const cascaderRef = ref(null)
|
|
|
|
|
|
|
|
const formRef = ref(null)
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
const {sys_normal_disable} = proxy.useDict("sys_normal_disable");
|
|
|
|
|
|
|
|
const tableList = ref([]);
|
|
|
|
const tableList = ref([]);
|
|
|
|
const open = ref(false);
|
|
|
|
const open = ref(false);
|
|
|
|
const loading = ref(false);
|
|
|
|
const loading = ref(false);
|
|
|
|
|
|
|
|
const submitLoading = ref(false);
|
|
|
|
const showSearch = ref(true);
|
|
|
|
const showSearch = ref(true);
|
|
|
|
const ids = ref([]);
|
|
|
|
const ids = ref([]);
|
|
|
|
const single = ref(true);
|
|
|
|
const single = ref(true);
|
|
|
@ -199,15 +228,63 @@ const columns = ref([
|
|
|
|
{key: 4, label: `创建人`, visible: true},
|
|
|
|
{key: 4, label: `创建人`, visible: true},
|
|
|
|
{key: 5, label: `创建时间`, visible: true},
|
|
|
|
{key: 5, label: `创建时间`, visible: true},
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
const exportExcel = () => {
|
|
|
|
const options = reactive({
|
|
|
|
|
|
|
|
// 界
|
|
|
|
|
|
|
|
kingdomInfo: [],
|
|
|
|
|
|
|
|
// 门
|
|
|
|
|
|
|
|
phylumInfo: [],
|
|
|
|
|
|
|
|
// 纲
|
|
|
|
|
|
|
|
classInfo: [],
|
|
|
|
|
|
|
|
// 目
|
|
|
|
|
|
|
|
orderInfo: [],
|
|
|
|
|
|
|
|
// 科
|
|
|
|
|
|
|
|
familyInfo: [],
|
|
|
|
|
|
|
|
// 属
|
|
|
|
|
|
|
|
genusInfo: [],
|
|
|
|
|
|
|
|
levelMap: {
|
|
|
|
|
|
|
|
1: selPhylumInfo,
|
|
|
|
|
|
|
|
2: selClassInfo,
|
|
|
|
|
|
|
|
3: selOrderInfo,
|
|
|
|
|
|
|
|
4: selFamilyInfo,
|
|
|
|
|
|
|
|
5: selGenusInfo,
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
const cascaderProps = {
|
|
|
|
|
|
|
|
lazy: false,
|
|
|
|
|
|
|
|
checkStrictly: false,
|
|
|
|
|
|
|
|
value: 'key',
|
|
|
|
|
|
|
|
lazyLoad(node, resolve) {
|
|
|
|
|
|
|
|
if (node.data.level) {
|
|
|
|
|
|
|
|
options.levelMap[node.data.level]({id: node.value}).then(res => {
|
|
|
|
|
|
|
|
resolve(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
selPhylumInfo({id: 1}).then(res => {
|
|
|
|
|
|
|
|
options.phylumInfo = res
|
|
|
|
|
|
|
|
resolve(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const selOptions = () => {
|
|
|
|
|
|
|
|
selKingdomInfo({}).then(res => {
|
|
|
|
|
|
|
|
options.kingdomInfo = res
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
Promise.all([selPhylumInfo({}), selClassInfo({}), selOrderInfo({}), selFamilyInfo({}), selGenusInfo({})]).then(res => {
|
|
|
|
|
|
|
|
let list = []
|
|
|
|
|
|
|
|
res.forEach(item => {
|
|
|
|
|
|
|
|
list.push(...item)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
options.genusInfo = handleTree(list, 'key', 'parent')
|
|
|
|
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
selOptions()
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
|
|
|
})
|
|
|
|
const formData = ref({
|
|
|
|
const formData = ref({
|
|
|
|
tempFileImage:undefined,
|
|
|
|
thumbnailUrl: undefined,
|
|
|
|
Genome:[],
|
|
|
|
tFiles: [],
|
|
|
|
Annotation:[],
|
|
|
|
|
|
|
|
Molecular:[],
|
|
|
|
|
|
|
|
GeneLevel:[],
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
const data = reactive({
|
|
|
|
const data = reactive({
|
|
|
|
form: {},
|
|
|
|
form: {},
|
|
|
@ -219,31 +296,93 @@ const data = reactive({
|
|
|
|
status: undefined,
|
|
|
|
status: undefined,
|
|
|
|
deptId: undefined
|
|
|
|
deptId: undefined
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
rules: {
|
|
|
|
|
|
|
|
speciesName: [
|
|
|
|
|
|
|
|
{required: true, message: '请输入物种名称', trigger: 'blur'},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
kingdomId: [
|
|
|
|
|
|
|
|
{required: true, message: '请选择所属界', trigger: 'blur'},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
genus: [
|
|
|
|
|
|
|
|
{required: true, message: '请选择物种属类', trigger: 'blur'},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
thumbnailUrl: [
|
|
|
|
|
|
|
|
{required: true, message: '请上传物种图片', trigger: 'blur'},
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const {queryParams, form,} = toRefs(data);
|
|
|
|
const {queryParams, form, rules} = toRefs(data);
|
|
|
|
|
|
|
|
|
|
|
|
/** 查询用户列表 */
|
|
|
|
/** 查询用户列表 */
|
|
|
|
function getList() {
|
|
|
|
function getList() {
|
|
|
|
loading.value = true;
|
|
|
|
loading.value = true;
|
|
|
|
listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
|
|
|
|
selGenoPage(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
|
|
|
|
loading.value = false;
|
|
|
|
loading.value = false;
|
|
|
|
tableList.value = res.rows;
|
|
|
|
tableList.value = res.rows;
|
|
|
|
total.value = res.total;
|
|
|
|
total.value = res.total;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const selPhylum = (value) => {
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
|
|
|
|
selPhylumInfo({id: value}).then(res => {
|
|
|
|
|
|
|
|
options.phylumInfo = res
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const uploadGenoRef = ref(null)
|
|
|
|
|
|
|
|
const saveGeno = () => {
|
|
|
|
|
|
|
|
if (formData.value.genus) {
|
|
|
|
|
|
|
|
formData.value.genus.forEach(item => {
|
|
|
|
|
|
|
|
let obj = item.split('-')
|
|
|
|
|
|
|
|
formData.value[obj[0]] = Number(obj[1])
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
let api = formData.value.id ? editGeno : addGeno
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
|
|
...formData.value,
|
|
|
|
|
|
|
|
genus: undefined,
|
|
|
|
|
|
|
|
tFiles:formData.value.tFiles.filter(item => !!item.id)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
formRef.value.validate(valid => {
|
|
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
|
|
submitLoading.value = true
|
|
|
|
|
|
|
|
api(params).then(res => {
|
|
|
|
|
|
|
|
uploadGenoRef.value.uploadFile(res.data)
|
|
|
|
|
|
|
|
// proxy.$modal.msgSuccess('保存成功');
|
|
|
|
|
|
|
|
// getList()
|
|
|
|
|
|
|
|
// showGenoForm.value = false
|
|
|
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
submitLoading.value = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
proxy.$modal.msgError('保存失败,请确认所有信息均已填写');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const uploadSuccess = () => {
|
|
|
|
|
|
|
|
submitLoading.value = false
|
|
|
|
|
|
|
|
proxy.$modal.msgSuccess('保存成功');
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
|
|
|
showGenoForm.value = false
|
|
|
|
|
|
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
/** 搜索按钮操作 */
|
|
|
|
function handleQuery() {
|
|
|
|
function handleQuery() {
|
|
|
|
queryParams.value.pageNum = 1;
|
|
|
|
queryParams.value.pageNum = 1;
|
|
|
|
getList();
|
|
|
|
getList();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const beforeAvatarUpload = (file) => {
|
|
|
|
const beforeAvatarUpload = (file) => {
|
|
|
|
fileToBlobURL(file).then(res =>{
|
|
|
|
formData.value.file = file
|
|
|
|
formData.value.tempFileImage = res
|
|
|
|
formData.value.fileName = file.name
|
|
|
|
|
|
|
|
fileToBlobURL(file).then(res => {
|
|
|
|
|
|
|
|
formData.value.thumbnailUrl = res
|
|
|
|
})
|
|
|
|
})
|
|
|
|
console.log(file);
|
|
|
|
|
|
|
|
return false
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const delFile = () => {
|
|
|
|
|
|
|
|
formData.value.file = undefined
|
|
|
|
|
|
|
|
formData.value.thumbnailUrl = undefined
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
/** 重置按钮操作 */
|
|
|
|
function resetQuery() {
|
|
|
|
function resetQuery() {
|
|
|
|
dateRange.value = [];
|
|
|
|
dateRange.value = [];
|
|
|
@ -259,19 +398,59 @@ function handleSelectionChange(selection) {
|
|
|
|
single.value = selection.length != 1;
|
|
|
|
single.value = selection.length != 1;
|
|
|
|
multiple.value = !selection.length;
|
|
|
|
multiple.value = !selection.length;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const echoGenus = (form) => {
|
|
|
|
|
|
|
|
formData.value.genus = [`phylumId-${form.phylumId}`, `classId-${form.classId}`,
|
|
|
|
|
|
|
|
`orderId-${form.orderId}`, `familyId-${form.familyId}`, `genusId-${form.genusId}`]
|
|
|
|
|
|
|
|
}
|
|
|
|
const toView = (row) => {
|
|
|
|
const toView = (row) => {
|
|
|
|
formData.value = row
|
|
|
|
|
|
|
|
showView.value = true
|
|
|
|
showView.value = true
|
|
|
|
|
|
|
|
selGenoById({id: row.id}).then(res => {
|
|
|
|
|
|
|
|
formData.value = res
|
|
|
|
|
|
|
|
echoGenus(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const toEdit = (row) => {
|
|
|
|
|
|
|
|
showGenoForm.value = true
|
|
|
|
|
|
|
|
selGenoById({id: row.id}).then(res => {
|
|
|
|
|
|
|
|
formData.value = res
|
|
|
|
|
|
|
|
echoGenus(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleDelete = (row) => {
|
|
|
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
|
|
|
'数据删除后,将无法被找回,是否仍要删除?',
|
|
|
|
|
|
|
|
'删除数据',
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
confirmButtonText: '确认删除',
|
|
|
|
|
|
|
|
cancelButtonText: '不,我再想想',
|
|
|
|
|
|
|
|
customClass: 'message-box'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
).then(() => {
|
|
|
|
|
|
|
|
delGeno({id: row.id}).then(res => {
|
|
|
|
|
|
|
|
proxy.$modal.msgSuccess('删除成功');
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}).catch()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const toAdd = () => {
|
|
|
|
const toAdd = () => {
|
|
|
|
formData.value = {}
|
|
|
|
formData.value = {
|
|
|
|
|
|
|
|
kingdomId: 1,
|
|
|
|
|
|
|
|
tFiles:[]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
submitLoading.value = false
|
|
|
|
showGenoForm.value = true
|
|
|
|
showGenoForm.value = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const handleUpdate = (row) => {
|
|
|
|
const handleUpdate = (row) => {
|
|
|
|
formData.value = row
|
|
|
|
formData.value = row
|
|
|
|
showGenoForm.value = true
|
|
|
|
showGenoForm.value = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const delFileGeno = (item) => {
|
|
|
|
|
|
|
|
if (isArray(formData.value.delFileIds)){
|
|
|
|
|
|
|
|
formData.value.delFileIds.push(item.id)
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
formData.value.delFileIds = [item.id]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.base-title {
|
|
|
|
.base-title {
|
|
|
@ -289,11 +468,13 @@ const handleUpdate = (row) => {
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
margin: 10px 0;
|
|
|
|
margin: 10px 0;
|
|
|
|
.label{
|
|
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
color: var(--el-text-color-regular);
|
|
|
|
color: var(--el-text-color-regular);
|
|
|
|
font-size: var(--el-form-label-font-size);
|
|
|
|
font-size: var(--el-form-label-font-size);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
border: 1px solid #d0d0d0;
|
|
|
|
border: 1px solid #d0d0d0;
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
padding: 10px 20px;
|
|
|
|
padding: 10px 20px;
|
|
|
@ -303,14 +484,17 @@ const handleUpdate = (row) => {
|
|
|
|
.el-form-item {
|
|
|
|
.el-form-item {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.avatar-uploader .avatar {
|
|
|
|
.avatar-uploader .avatar {
|
|
|
|
width: 130px;
|
|
|
|
width: 130px;
|
|
|
|
height: 130px;
|
|
|
|
height: 130px;
|
|
|
|
display: block;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.avatar-uploader :deep(.el-upload) {
|
|
|
|
.avatar-uploader :deep(.el-upload) {
|
|
|
|
|
|
|
|
background: #f6f6f6;
|
|
|
|
border: 1px dashed var(--el-border-color);
|
|
|
|
border: 1px dashed var(--el-border-color);
|
|
|
|
border-radius: 6px;
|
|
|
|
border-radius: 10px;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
@ -320,9 +504,14 @@ const handleUpdate = (row) => {
|
|
|
|
.avatar-uploader :deep(.el-upload:hover) {
|
|
|
|
.avatar-uploader :deep(.el-upload:hover) {
|
|
|
|
border-color: var(--el-color-primary);
|
|
|
|
border-color: var(--el-color-primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.avatar-uploader-image{
|
|
|
|
.upload-icon{
|
|
|
|
|
|
|
|
height: 24px;
|
|
|
|
|
|
|
|
width: 24px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar-uploader-image {
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
.image{
|
|
|
|
|
|
|
|
|
|
|
|
.image {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 2;
|
|
|
|
z-index: 2;
|
|
|
@ -334,12 +523,15 @@ const handleUpdate = (row) => {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.avatar-uploader {
|
|
|
|
.avatar-uploader {
|
|
|
|
width: 130px;
|
|
|
|
width: 130px;
|
|
|
|
height: 130px;
|
|
|
|
height: 130px;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.avatar-uploader-icon{
|
|
|
|
|
|
|
|
|
|
|
|
.avatar-uploader-icon {
|
|
|
|
margin-top: 30px;
|
|
|
|
margin-top: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|