|
|
@@ -0,0 +1,228 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="holding5_add">
|
|
|
+ <TabList :ind="5" />
|
|
|
+ <div class="right">
|
|
|
+ <div class="top">
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
+ <el-breadcrumb-item to="">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>藏品注销</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item id="mytitle">编辑</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="conten">
|
|
|
+ <el-form
|
|
|
+ :model="fromData"
|
|
|
+ :rules="rules"
|
|
|
+ ref="fromData"
|
|
|
+ label-width="140px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <div class="one_row">
|
|
|
+ <el-form-item label="注销编号" prop="number" style="width: 45%">
|
|
|
+ <el-input v-model="fromData.number" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="登记人" prop="people" style="width: 45%">
|
|
|
+ <el-input v-model="fromData.people" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="注销说明" prop="textarea" style="width: 90%">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ v-model="fromData.textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 藏品信息 -->
|
|
|
+ <div class="info">
|
|
|
+ <div class="title">
|
|
|
+ <h3>藏品信息</h3>
|
|
|
+ <div class="btn">
|
|
|
+ <el-button size="small" @click="isShow = true">添 加</el-button>
|
|
|
+ <el-button size="small">删 除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--表格 -->
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="40"> </el-table-column>
|
|
|
+ <el-table-column label="缩略图" width="146">
|
|
|
+ <template #default>
|
|
|
+ <div class="smimg">
|
|
|
+ <img src="../../assets/img/user.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="总登记号" width="235">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="藏品名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="类别" width="130">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="完残程度" width="220">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="藏品年代" width="130">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="130">
|
|
|
+ <template #default>
|
|
|
+ <el-button type="text" @click="isShow = true"
|
|
|
+ >查 看</el-button
|
|
|
+ >
|
|
|
+ <el-button type="text">删 除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 最下面的2个按钮 -->
|
|
|
+ <div class="bot_btn">
|
|
|
+ <el-button type="primary">提 交</el-button>
|
|
|
+ <el-button @click="$router.go(-1)">返 回</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 点击添加或者编辑出现弹窗 -->
|
|
|
+ <Holding1Dialog :dialogFormVisible.sync="isShow" />
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Holding1Dialog from './holding1_Dialog.vue'
|
|
|
+
|
|
|
+import TabList from '@/components/tabLeft.vue'
|
|
|
+export default {
|
|
|
+ name: 'holding5_add',
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
+ components: { TabList, Holding1Dialog },
|
|
|
+ data () {
|
|
|
+ // 这里存放数据
|
|
|
+ return {
|
|
|
+ // 控制弹出层显示隐藏
|
|
|
+ isShow: false,
|
|
|
+ // 表单数据
|
|
|
+ fromData: {
|
|
|
+ number: 'DJ2021081701',
|
|
|
+ people: 'Admin',
|
|
|
+ textarea: ''
|
|
|
+ },
|
|
|
+ // 表单验证
|
|
|
+ rules: {
|
|
|
+ number: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
|
|
+ people: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
|
|
+ textarea: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 255, message: '不能超过255个字符', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ // 表格数据
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {},
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created () {},
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.holding5_add {
|
|
|
+ /deep/#mytitle > span {
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ .right {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .top {
|
|
|
+ padding-left: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 1px 1px 10px 1px;
|
|
|
+ margin-left: 2px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .conten {
|
|
|
+ position: relative;
|
|
|
+ padding: 40px 0 0 20px;
|
|
|
+ flex: 1;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20px 20px 40px;
|
|
|
+ .one_row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ }
|
|
|
+ .tow_row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ max-height: 390px;
|
|
|
+ overflow: auto;
|
|
|
+ width: 86%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-left: 70px;
|
|
|
+ .title {
|
|
|
+ color: black;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 52px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ .smimg {
|
|
|
+ border: 3px solid #ccc;
|
|
|
+ height: 78px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot_btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 230px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
