|
|
@@ -1,11 +1,443 @@
|
|
|
-<script setup>
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
<template>
|
|
|
-组件管理
|
|
|
+ <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
|
|
|
+ <div style="display: flex;width: 100%;margin-left: 1%;">
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;">
|
|
|
+ <div>
|
|
|
+ 组件名称:
|
|
|
+ </div>
|
|
|
+ <el-input v-model="input" style="width:50%;margin-left: 1%;" placeholder="" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 组件分类:
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 50%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 提供单位:
|
|
|
+ </div>
|
|
|
+ <el-input v-model="input" style="width: 50%;margin-left: 1%;" placeholder="" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: -5%;">
|
|
|
+ <div>
|
|
|
+ 时间:
|
|
|
+ </div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ style="width: 50%;margin-left: 1%;"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="To"
|
|
|
+ start-placeholder="Start date"
|
|
|
+ end-placeholder="End date"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;width: 20%;align-items: center;margin-left: 15%;">
|
|
|
+ <el-button type="primary" plain="">
|
|
|
+ 更多<el-icon><DArrowRight /></el-icon>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" style="margin-left: 5%;">查询</el-button>
|
|
|
+ <el-button type="primary" style="margin-left:5%;">注册</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 1%;margin-left: 1%;width: 98%;">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 98%;margin-left: 1%;margin-top: 1%;"
|
|
|
+ :cell-style="{ textAlign: 'center', }"
|
|
|
+ :header-cell-style="{ textAlign: 'center',color:'#337ecc',fontWeight: 'bold', fontSize: '16px' }"
|
|
|
+ :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
|
|
|
+ border
|
|
|
+ :max-height="tableheight">
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
+ <el-table-column type="index" label="序号"></el-table-column>
|
|
|
+ <el-table-column prop="date" label="组件名称">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="组件分类" />
|
|
|
+ <el-table-column prop="address" label="提供单位" />
|
|
|
+ <el-table-column prop="address" label="注册人员" />
|
|
|
+ <el-table-column prop="tm" label="注册时间" />
|
|
|
+ <el-table-column prop="address" label="评价结果">
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="scope.row.sta=='1'" style="color: black;">未评价</div>
|
|
|
+ <div v-if="scope.row.sta=='0'" style="color: #337ecc;">优</div>
|
|
|
+ <div v-if="scope.row.sta=='2'" style="color: greenyellow;">良</div>
|
|
|
+ <div v-if="scope.row.sta=='3'" style="color: red;">差</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="操作" >
|
|
|
+ <template #default="scope">
|
|
|
+ <div style="display: flex;justify-content: space-between;width: 80%;">
|
|
|
+ <el-button type="primary" size="mini" text style="margin-left: -2%;">发布</el-button>
|
|
|
+ <el-button type="primary" size="mini" text style="margin-left: -3%;">查看</el-button>
|
|
|
+ <el-button type="primary" text size="mini" style="margin-left: -3%;">编辑</el-button>
|
|
|
+ <el-button type="danger" text size="mini" style="margin-left: -3%;">注销</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div style="float: right;margin-top: 1%;margin-right: 1%;">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="50"
|
|
|
+ class="mt-4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-dialog v-model="dialogVisible" title="组件注册" width="50%" >
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">基本信息</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="组件名称:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="版本号:" prop="name">
|
|
|
+ <el-input v-model="form.region" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="组件英文名称:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="开发语言:">
|
|
|
+ <el-radio-group v-model="radio1" class="ml-4" size="small" style="margin-top: -10%;">
|
|
|
+ <el-radio label="1" size="large">C++</el-radio>
|
|
|
+ <el-radio label="2" size="large">.net</el-radio>
|
|
|
+ <el-radio label="2" size="large">java</el-radio>
|
|
|
+ <el-radio label="2" size="large">Python</el-radio>
|
|
|
+ <el-radio label="2" size="large">其他</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="组件分类:">
|
|
|
+ <el-select
|
|
|
+ v-model="value"
|
|
|
+ style="width: 50%;margin-left: 1%;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="标签:">
|
|
|
+ <el-checkbox-group v-model="checkList" style="margin-top: -5%;">
|
|
|
+ <el-checkbox v-for="item in checkGroup" :label="item.label"/>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <el-button type="primary" size="small" :icon="Plus">添加标签</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="组件简介:">
|
|
|
+ <el-input v-model="form.region" style="width: 30%;"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">提供单位信息</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="提供单位:" prop="name">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">选择</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="技术支撑单位:" prop="name">
|
|
|
+ <el-input v-model="form.region" style="width: 50%;" />
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="40" style="margin-top: 1%;">
|
|
|
+ <el-col :span="9" >
|
|
|
+ <el-form-item label="联系方式:" prop="name">
|
|
|
+ <el-input v-model="form.user" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">输入输出示例数据</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="输入示例数据:" prop="name">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">上传</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="输出示例数据:" prop="name">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">选择</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;display: flex;align-items: center;">
|
|
|
+ <div style="background-color: blue;width: 2px;height: 16px;"></div>
|
|
|
+ <div style="font-weight: bold;font-size: 16px;margin-left: 0.5%;">模型组件上传</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 1%;margin-top: 1%;">
|
|
|
+ <el-form style="margin-left: 5%;margin-top: 2%;" :model="form" class="demo-form-inline" :rules="rules">
|
|
|
+ <el-form-item label="组件执行包:" prop="name">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">上传</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="color: #b1b3b8;">
|
|
|
+ 注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件说明文档:" prop="">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">上传</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="color: #b1b3b8;">
|
|
|
+ 注:请上传后缀名为.jar、·ph、.sh、.exe、.zip、.bat的文件
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="组件依赖环境说明:" prop="">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <el-input v-model="form.name" style="width: 50%;"/>
|
|
|
+ <el-button type="primary" style="margin-left: 1%;">上传</el-button>
|
|
|
+ <el-button type="" style="margin-left:1%;">清空</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">Cancel</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">
|
|
|
+ Confirm
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import {
|
|
|
+ ArrowLeft,
|
|
|
+ Plus
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { reactive } from 'vue'
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
+interface RuleForm {
|
|
|
+ name: string
|
|
|
+}
|
|
|
+const dialogVisible = true
|
|
|
+const form = reactive({
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date: '',
|
|
|
+})
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ name: [
|
|
|
+ { required: true, message: ' ', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+})
|
|
|
|
|
|
+const checkGroup = [
|
|
|
+ {label:'水文预报'},
|
|
|
+ {label:'维水动力'},
|
|
|
+ {label:'二维水动力'},
|
|
|
+ {label:'机器学习'},
|
|
|
+]
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'2'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },{
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'1'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date:'新安江模型',
|
|
|
+ name:'模型组件',
|
|
|
+ address:'张XX',
|
|
|
+ tm:'2023-5-15',
|
|
|
+ sta:'3'
|
|
|
+ },
|
|
|
+]
|
|
|
+const heightAll = window.innerHeight
|
|
|
+const valueHelpSel = '';
|
|
|
+const tableheight = window.innerHeight*0.7
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: 'Option1',
|
|
|
+ label: 'Option1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option2',
|
|
|
+ label: 'Option2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option3',
|
|
|
+ label: 'Option3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option4',
|
|
|
+ label: 'Option4',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Option5',
|
|
|
+ label: 'Option5',
|
|
|
+ },
|
|
|
+]
|
|
|
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
|
|
|
+function showNode(data, node){
|
|
|
+ console.log(data,node)
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.el-table .el-table__row td {
|
|
|
+ height: 60px !important; /* 行高 */
|
|
|
+}
|
|
|
+.custom-tree-node {
|
|
|
+ display: flex; /* 启用 Flex 布局 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ gap: 8px; /* 图标与文字间距 */
|
|
|
+}
|
|
|
</style>
|
