forked from iod/cpnode-front
477 lines
12 KiB
Vue
477 lines
12 KiB
Vue
<config>
|
|
{
|
|
"name": "repoList",
|
|
"title": "数字对象仓库列表"
|
|
}
|
|
</config>
|
|
|
|
<template>
|
|
<div class="all">
|
|
<div class="title">
|
|
<el-icon><home-filled /></el-icon> 数字对象仓库管理/数字对象仓库列表
|
|
</div>
|
|
<div class="do">
|
|
<div class="but">
|
|
<!-- 增加按钮 -->
|
|
<div class="add" @click="dialogFormVisible = true">
|
|
<el-icon class="icon"><plus /></el-icon
|
|
><el-button
|
|
type="text"
|
|
style="color: #101010 !important"
|
|
@click="dialogFormVisible = true"
|
|
>增加</el-button
|
|
>
|
|
</div>
|
|
<!-- 点击增加按钮弹出层 -->
|
|
<el-dialog
|
|
v-model="dialogFormVisible"
|
|
title="新增数字对象仓库"
|
|
width="90%"
|
|
custom-class="dialog"
|
|
>
|
|
<div class="in_dialog">
|
|
<div>
|
|
<!-- 数字对象仓库ID输入 -->
|
|
<div class="id_input">
|
|
<el-form :model="form" class="form">
|
|
<el-form-item
|
|
label="数字对象仓库ID"
|
|
:label-width="formLabelWidth"
|
|
>
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- "尝试连接"按钮 -->
|
|
<el-button
|
|
type="primary"
|
|
:icon="Link"
|
|
style="
|
|
height: 50px !important;
|
|
margin-left: 15px;
|
|
padding: 0 10px;
|
|
border-color: #dcdfe6;
|
|
background-color: #fff;
|
|
color: black;
|
|
"
|
|
>尝试连接</el-button
|
|
>
|
|
<el-icon class="right"
|
|
><circle-check
|
|
style="
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
color: green;
|
|
"
|
|
/></el-icon>
|
|
</div>
|
|
<!-- 名称 -->
|
|
<div class="name">
|
|
<el-form :model="form" class="form_a">
|
|
<el-form-item label="名称" :label-width="formLabelWidth">
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 所有者 -->
|
|
<el-form :model="form" class="form_b">
|
|
<el-form-item label="所有者" :label-width="formLabelWidth">
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 是否索引 -->
|
|
<el-form :model="form" class="form_b">
|
|
<el-form-item label="是否索引" :label-width="formLabelWidth">
|
|
<el-select v-model="value" clearable placeholder="Select">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- 已添加的管理者 -->
|
|
<el-form :model="form" class="form_c">
|
|
<el-form-item
|
|
label="已添加的管理者"
|
|
:label-width="formLabelWidth"
|
|
>
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 说明 -->
|
|
<el-form :model="form" class="form_d">
|
|
<el-form-item label="说明" :label-width="formLabelWidth">
|
|
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- 确定按钮 -->
|
|
<el-button
|
|
type="info"
|
|
size="medium"
|
|
plain
|
|
class="confirm"
|
|
@click="dialogFormVisible = false"
|
|
>确定</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 删除按钮 -->
|
|
<div class="reduce">
|
|
<el-icon class="icon"><minus /></el-icon>删除选中
|
|
</div>
|
|
</div>
|
|
<!-- 搜索框 -->
|
|
<div
|
|
style="width: 375px; height: 32px; border-color: pink !important"
|
|
size="mini"
|
|
class="sousuo"
|
|
>
|
|
<el-input
|
|
v-model="input3"
|
|
placeholder="可按关键字模糊搜索"
|
|
class="input-with-select"
|
|
size="mini"
|
|
:prefix-icon="Search"
|
|
>
|
|
<template #append>
|
|
<el-select
|
|
v-model="select"
|
|
placeholder="高级搜索"
|
|
style="width: 48px"
|
|
>
|
|
<el-option label="Restaurant" value="1"></el-option>
|
|
<el-option label="Order No." value="2"></el-option>
|
|
<el-option label="Tel" value="3"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
:height="400"
|
|
size="small"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column label="ID" width="120">
|
|
<template #default="scope">{{ scope.row.date }}</template>
|
|
</el-table-column>
|
|
<el-table-column property="name" label="名称" width="120" />
|
|
<el-table-column
|
|
property="address"
|
|
label="所有者"
|
|
show-overflow-tooltip
|
|
/>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<div class="demo-pagination-block">
|
|
<el-pagination
|
|
v-model:currentPage="currentPage4"
|
|
:page-sizes="[100, 200, 300, 400]"
|
|
:page-size="100"
|
|
layout="total, jumper, prev, pager, next, sizes"
|
|
:total="400"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import { reactive, ref, toRefs } from 'vue'
|
|
import {
|
|
Search,
|
|
Plus,
|
|
Minus,
|
|
HomeFilled,
|
|
Link,
|
|
CircleCheck,
|
|
} from '@element-plus/icons-vue'
|
|
const input3 = ref('')
|
|
const select = ref('')
|
|
const tableData = reactive([
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-02',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-08',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-06',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
{
|
|
date: '2016-05-07',
|
|
name: 'Tom',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
},
|
|
])
|
|
|
|
// 点击增加按钮弹出层
|
|
|
|
const formProps = reactive({
|
|
gridData: [
|
|
{
|
|
date: '2016-05-02',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District',
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District',
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District',
|
|
},
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District',
|
|
},
|
|
],
|
|
dialogTableVisible: false,
|
|
dialogFormVisible: false,
|
|
form: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: '',
|
|
},
|
|
formLabelWidth: '120px',
|
|
})
|
|
|
|
const {
|
|
gridData,
|
|
dialogTableVisible,
|
|
dialogFormVisible,
|
|
form,
|
|
formLabelWidth,
|
|
} = toRefs(formProps)
|
|
|
|
// const multipleSelection = ref([])
|
|
const multipleTable = ref(null)
|
|
|
|
// function handleSelectionChange(val: any) {
|
|
// multipleSelection = val
|
|
// },
|
|
|
|
// 分页
|
|
|
|
const currentPage4 = ref(4)
|
|
const handleSizeChange = (val: number) => {
|
|
console.log(`${val} items per page`)
|
|
}
|
|
const handleCurrentChange = (val: number) => {
|
|
console.log(`current page: ${val}`)
|
|
}
|
|
|
|
//el-select
|
|
const options = reactive([
|
|
{
|
|
value: 'Option1',
|
|
label: 'Option1',
|
|
},
|
|
{
|
|
value: 'Option2',
|
|
label: 'Option2',
|
|
},
|
|
{
|
|
value: 'Option3',
|
|
label: 'Option3',
|
|
},
|
|
{
|
|
value: 'Option4',
|
|
label: 'Option4',
|
|
},
|
|
{
|
|
value: 'Option5',
|
|
label: 'Option5',
|
|
},
|
|
])
|
|
|
|
const value = ref('')
|
|
</script>
|
|
<style scope lang="scss">
|
|
.all {
|
|
overflow: hidden;
|
|
.title {
|
|
margin: 25px 0px 34px 10px;
|
|
font-size: 14px;
|
|
color: rgba(40, 43, 45, 100);
|
|
font-size: 12px;
|
|
font-family: 'SourceHanSansSC-regular';
|
|
}
|
|
.do {
|
|
padding: 21px 31px 55px 10px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #ccc;
|
|
box-shadow: 0px -20px 30px -30px inset #ccc;
|
|
.but {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.add,
|
|
.reduce {
|
|
// color: #101010;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 126px;
|
|
height: 32px;
|
|
border: 2px solid#DDDADA;
|
|
.icon {
|
|
margin-right: 8px;
|
|
font-weight: 900;
|
|
color: #333;
|
|
}
|
|
}
|
|
.add {
|
|
margin-right: 44px;
|
|
}
|
|
.dialog {
|
|
height: 90%;
|
|
background-color: #f2f2f2;
|
|
padding: 30px;
|
|
.in_dialog {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
padding: 80px 163px 172px 106px;
|
|
background-color: white;
|
|
position: relative;
|
|
.confirm {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
.id_input,
|
|
.name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.form {
|
|
color: #101010;
|
|
}
|
|
.right {
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .shadow_line {
|
|
// height: 1px;
|
|
// background-color: #ccc;
|
|
// box-shadow: 5px 8px 5px #ccc;
|
|
// }
|
|
.demo-pagination-block {
|
|
margin-top: 297px;
|
|
}
|
|
}
|
|
.input-with-select .el-input-group__prepend {
|
|
background-color: #fff;
|
|
}
|
|
.el-input__inner {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
}
|
|
.ant-layout .child-layout {
|
|
background: #fff;
|
|
}
|
|
.el-table::before {
|
|
height: 0;
|
|
}
|
|
.el-dialog__body {
|
|
height: 100%;
|
|
}
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
// 修改element plus中的input的样式
|
|
.form input.el-input__inner {
|
|
width: 681px;
|
|
height: 50px !important;
|
|
}
|
|
.form_a input.el-input__inner,
|
|
.form_b input.el-input__inner {
|
|
width: 248px;
|
|
height: 50px !important;
|
|
}
|
|
.form_c input.el-input__inner {
|
|
height: 50px !important;
|
|
}
|
|
.form_d input.el-input__inner {
|
|
height: 200px !important;
|
|
}
|
|
|
|
.el-form-item__label {
|
|
width: 150px !important;
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: center;
|
|
color: rgba(16, 16, 16, 100);
|
|
font-size: 16px;
|
|
font-family: 'SourceHanSansSC-regular';
|
|
}
|
|
.el-dialog__title {
|
|
color: rgba(16, 16, 16, 100);
|
|
font-size: 28px;
|
|
text-align: left;
|
|
font-family: SourceHanSansSC-bold;
|
|
}
|
|
.is-leaf div.cell {
|
|
color: #101010;
|
|
font-family: 'PingFangSC-regular';
|
|
font-size: 14px;
|
|
}
|
|
.name form.form_b,
|
|
.form_a {
|
|
width: 200px !important;
|
|
}
|
|
// .el-input__inner {
|
|
// padding: 0 !important;
|
|
// }
|
|
// .all .do .but .add .icon,
|
|
// .all .do .but .reduce .icon {
|
|
// color: #101010;
|
|
// }
|
|
</style>
|