|
|
@@ -0,0 +1,524 @@
|
|
|
+<template>
|
|
|
+ <el-dialog title="编辑藏品" :visible="dialogFormVisible" @close="cancel()">
|
|
|
+ <!-- 表单内容 -->
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="120px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="藏品名称：" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="总登记号：" prop="registerNum">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.registerNum"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="编号类型：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.numTypeId"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in numType"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="藏品编号：">
|
|
|
+ <el-input v-model="ruleForm.num" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="原名：">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.primitiveName"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="年代：" prop="age">
|
|
|
+ <el-input v-model="ruleForm.age" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="文物类别：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.goodsTypeId"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in objectType"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="文物级别：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.level"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="三级" :value="3"></el-option>
|
|
|
+ <el-option label="二级" :value="2"></el-option>
|
|
|
+ <el-option label="一级" :value="1"></el-option>
|
|
|
+ <el-option label="一般" :value="0"></el-option>
|
|
|
+ <el-option label="未定级" :value="-1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="文物质地：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.textureType"
|
|
|
+ placeholder="质地类型"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="单一质地" :value="0"></el-option>
|
|
|
+ <el-option label="复合质地" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-input
|
|
|
+ style="margin: 0 20px"
|
|
|
+ v-model="ruleForm.textureCategory"
|
|
|
+ placeholder="质地类别"
|
|
|
+ ></el-input>
|
|
|
+ <el-input v-model="ruleForm.texture" placeholder="质地"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="外形尺寸：" prop="length">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.length"
|
|
|
+ placeholder="长（cm）"
|
|
|
+ style="width: 30%"
|
|
|
+ ></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.width"
|
|
|
+ placeholder="宽（cm）"
|
|
|
+ style="width: 30%; margin: 0 20px"
|
|
|
+ ></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.height"
|
|
|
+ placeholder="高（cm）"
|
|
|
+ style="width: 30%"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="完残程度：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.integrity"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="完整" :value="1"></el-option>
|
|
|
+ <el-option label="基本完整" :value="0"></el-option>
|
|
|
+ <el-option label="残缺" :value="-1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="保存状态：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.repair"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="已修复" :value="3"></el-option>
|
|
|
+ <el-option label="继续修复" :value="2"></el-option>
|
|
|
+ <el-option label="需要修复" :value="1"></el-option>
|
|
|
+ <el-option label="不需修复" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="数量类型：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.amountType"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option label="一套多件" :value="1"></el-option>
|
|
|
+ <el-option label="单件" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="具体数量：">
|
|
|
+ <el-input v-model="ruleForm.amount" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="质量范围：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.qualityScope"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in qualityRange"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="具体质量：">
|
|
|
+ <el-input v-model="ruleForm.quality" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="入藏时间范围：">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.checkInScope"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in checkInScope"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="入藏年度：">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.checkInYear"
|
|
|
+ placeholder="请输入"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!-- 图片和附件 -->
|
|
|
+ <el-form-item label="藏品图片：">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="baseURL + '/cms/goods/uploadImg'"
|
|
|
+ :headers="{
|
|
|
+ token,
|
|
|
+ }"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforethumbUpload"
|
|
|
+ :on-success="upload_thumb_success"
|
|
|
+ >
|
|
|
+ <div v-if="ruleForm.thumb" class="imgdiv">
|
|
|
+ <img
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ :src="baseURL + ruleForm.thumb"
|
|
|
+ />
|
|
|
+ <i
|
|
|
+ class="el-icon-circle-close"
|
|
|
+ @click.stop="ruleForm.thumb = ''"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ <span>支持上传jpg，png格式，最大10M</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传附件：">
|
|
|
+ <el-select v-model="affixVal" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in affix"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- 上传附件 -->
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="baseURL + `/cms/goods/upload/${affixVal}/${affixVal+'mulu'}`"
|
|
|
+ :headers="{
|
|
|
+ token,
|
|
|
+ }"
|
|
|
+ :on-success="successFujian"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ multiple
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :file-list="fileList"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column label="缩略图" width="140">
|
|
|
+ <template #default>
|
|
|
+ <div class="smimg">
|
|
|
+ <img src="../../assets/img/user.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="附件名称"> </el-table-column>
|
|
|
+ <el-table-column prop="address" label="上传时间" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="150">
|
|
|
+ <template #default>
|
|
|
+ <el-button type="text">重 传</el-button>
|
|
|
+ <el-button type="text">删 除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="btnOK">提 交</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from '@/utils/request'
|
|
|
+import {
|
|
|
+ holdingAdd,
|
|
|
+ getGoodsNumType,
|
|
|
+ getGoodsType,
|
|
|
+ detailsById
|
|
|
+} from '@/apis/holding'
|
|
|
+export default {
|
|
|
+ name: 'holding0_DiaEdit',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ dialogFormVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 服务器前缀地址
|
|
|
+ baseURL: '',
|
|
|
+ token: '',
|
|
|
+ ruleForm: {
|
|
|
+ age: '', // 年代
|
|
|
+ amount: '', // 数量
|
|
|
+ amountType: 0, // 数量类型， 0：单件， 1：一套多件
|
|
|
+ checkInScope: '2001至今', // 入藏时间范围
|
|
|
+ checkInYear: '', // 入藏年底
|
|
|
+ dirCode: 'daliCK', // 目录码
|
|
|
+ fileIds: '', // 图片类型使用，文件id, 多个以逗号分隔
|
|
|
+ goodsTypeId: 1, // 文物类型Id
|
|
|
+ height: '', // 高
|
|
|
+ // id:'',//id, 修改时必须传，新增忽略
|
|
|
+ integrity: 1, // 完整度， -1：残缺，0：基本完整， 1：完整
|
|
|
+ // isStorage: '', // 是否入库，0：不入库， 1：入库
|
|
|
+ length: '', // 长
|
|
|
+ level: 3, // 文物级别，前端输入。 -1：未定级， 0：一般， 1：一级， 2：二级， 3：三级
|
|
|
+ name: '', // 标题
|
|
|
+ num: '', // 臧品编号
|
|
|
+ numTypeId: 2, // 编号类型Id
|
|
|
+ primitiveName: '', // 原名
|
|
|
+ quality: '', // 具体质量
|
|
|
+ qualityScope: '0.01-1kg', // 质量范围
|
|
|
+ registerNum: '', // 总登记号
|
|
|
+ repair: 3, // 保存状态（修复状态）， 0：不需修复， 1：需要修复，2：继续修复， 3：已修复
|
|
|
+ texture: '', // 质地
|
|
|
+ textureCategory: '', // 质地类别
|
|
|
+ textureType: 0, // 质地类型，前端输入, 0:单一质地， 1：复活质地
|
|
|
+ thumb: '', // 缩略图url
|
|
|
+ width: '' // 宽
|
|
|
+ },
|
|
|
+ checkInScope: [
|
|
|
+ '1949.10.1前',
|
|
|
+ '1949.10.1-1965',
|
|
|
+ '1966-1976',
|
|
|
+ '1977-2000',
|
|
|
+ '2001至今'
|
|
|
+ ], // 入藏时间范围
|
|
|
+ qualityRange: [
|
|
|
+ '<0.01kg',
|
|
|
+ '0.01-1kg',
|
|
|
+ '1-50kg',
|
|
|
+ '50-100kg',
|
|
|
+ '100-1000kg',
|
|
|
+ '>1000kg'
|
|
|
+ ], // 质量范围
|
|
|
+ objectType: [], // 文物类型
|
|
|
+ numType: [], // 文物编号类型
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
|
|
+ registerNum: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
|
|
+ age: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
|
|
+ length: [{ required: true, message: '不能为空', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ // 上传图片和文件
|
|
|
+ fileList: [],
|
|
|
+ affixVal: 'video',
|
|
|
+ affix: [
|
|
|
+ { label: '模型', value: 'model' },
|
|
|
+ { label: '视频', value: 'video' },
|
|
|
+ { label: '图片', value: 'img' },
|
|
|
+ { label: '音频', value: 'audio' },
|
|
|
+ { label: '文档', value: 'doc' }
|
|
|
+ ],
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
+ // 表格数据
|
|
|
+ tableData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ // 通过id获取藏品详情--让父组件调用
|
|
|
+ async detailsById (myId) {
|
|
|
+ const res = await detailsById(myId)
|
|
|
+ this.ruleForm = res.data
|
|
|
+ // console.log(99999, res)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传附件
|
|
|
+ successFujian (file, fileList) {
|
|
|
+ console.log(333333, file, fileList)
|
|
|
+ },
|
|
|
+ handleRemove (file, fileList) {
|
|
|
+ console.log(111111111, file, fileList)
|
|
|
+ },
|
|
|
+ handlePreview (file) {
|
|
|
+ console.log(222222222, file)
|
|
|
+ },
|
|
|
+ handleExceed (files, fileList) {
|
|
|
+ this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
|
|
+ },
|
|
|
+ beforeRemove (file, fileList) {
|
|
|
+ return this.$confirm(`确定移除 ${file.name}？`)
|
|
|
+ },
|
|
|
+ // 上传图片
|
|
|
+ beforethumbUpload (file) {
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 10
|
|
|
+ const typeOk = file.type === 'image/png' || file.type === 'image/jpeg'
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error('照片格式有误！')
|
|
|
+ reject(file)
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error('照片大小超过10M！')
|
|
|
+ reject(file)
|
|
|
+ } else {
|
|
|
+ this.$message.success('上传成功')
|
|
|
+ resolve(file)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload_thumb_success (data) {
|
|
|
+ this.loading = false
|
|
|
+ this.ruleForm.thumb = data.data.filePath
|
|
|
+ },
|
|
|
+ // 点击确定
|
|
|
+ async btnOK () {
|
|
|
+ try {
|
|
|
+ await this.$refs.ruleForm.validate()
|
|
|
+ // console.log(this.ruleForm)
|
|
|
+ this.ruleForm.amount = Number(this.ruleForm.amount)
|
|
|
+ await holdingAdd(this.ruleForm)
|
|
|
+ // console.log(6666, res)
|
|
|
+ this.$message.success('编辑成功')
|
|
|
+ this.cancel()
|
|
|
+ // 通知父组件更新界面
|
|
|
+ this.$emit('updateUI')
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击取消
|
|
|
+ cancel () {
|
|
|
+ this.$emit('update:dialogFormVisible', false)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL
|
|
|
+ // 获取用户token
|
|
|
+ this.token = localStorage.getItem('daliCK_token')
|
|
|
+ },
|
|
|
+ async mounted () {
|
|
|
+ // 获取文物编号类型
|
|
|
+ const res = await getGoodsNumType()
|
|
|
+ this.numType = res.data
|
|
|
+ // 获取文物类型
|
|
|
+ const res2 = await getGoodsType()
|
|
|
+ this.objectType = res2.data
|
|
|
+ },
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+
|
|
|
+/deep/.upload-demo{
|
|
|
+ float: left;
|
|
|
+ margin-right: 30px;
|
|
|
+}
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ overflow: auto;
|
|
|
+ max-height: 556px;
|
|
|
+}
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ /deep/& > div {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.smimg {
|
|
|
+ height: 80px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 3px solid #ccc;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-icon-plus {
|
|
|
+ border: 1px dashed #000;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/deep/.el-icon-circle-close {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.imgdiv {
|
|
|
+ max-width: 400px;
|
|
|
+}
|
|
|
+</style>
|
