初步完成表格渲染和单个藏品的删除

src/apis/holding.js

@@ -27,3 +27,9 @@ export const getGoodsType = () => {
     url: '/cms/goods/base/getGoodsType'
   })
 }
+// 删除单个文物类型
+export const removeOne = (id) => {
+  return axios({
+    url: `/cms/goods/remove/${id}`
+  })
+}

src/views/holding/holding0.vue

@@ -90,7 +90,6 @@
 </template>
 
 <script>
-import { getHoldingList } from '@/apis/holding'
 import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding0',
@@ -132,20 +131,12 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    // 获取藏品登记列表
-    async getHoldingList (data) {
-      const res = await getHoldingList(data)
-      console.log(res)
-      this.tableData = res.data.list
-    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
     this.tabInd = this.INtabInd
-    // 调用藏品登记方法
-    this.getHoldingList(this.mydata)
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前

src/views/holding/holding0_Dialog.vue

@@ -152,10 +152,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="具体数量：">
-          <el-input
-            v-model="ruleForm.amount"
-            placeholder="请输入"
-          ></el-input>
+          <el-input v-model="ruleForm.amount" placeholder="请输入"></el-input>
         </el-form-item>
       </div>
 
@@ -166,7 +163,12 @@
             placeholder="请选择"
             style="width: 100%"
           >
-            <el-option v-for="item in qualityRange" :key="item" :label="item" :value="item"></el-option>
+            <el-option
+              v-for="item in qualityRange"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
 
@@ -182,7 +184,12 @@
             placeholder="请选择"
             style="width: 100%"
           >
-            <el-option v-for="item in checkInScope" :key="item" :label="item" :value="item"></el-option>
+            <el-option
+              v-for="item in checkInScope"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="入藏年度：">
@@ -196,7 +203,7 @@
       <el-form-item label="藏品图片：">
         <el-upload
           class="avatar-uploader"
-          action="http://192.168.0.135:8004/cms/goods/uploadImg"
+          :action="baseURL + '/cms/goods/uploadImg'"
           :headers="{
             token,
           }"
@@ -207,7 +214,7 @@
           <div v-if="ruleForm.thumb" class="imgdiv">
             <img
               style="width: 100%; height: 100%"
-              :src="'http://192.168.0.135:8004' + ruleForm.thumb"
+              :src="baseURL + ruleForm.thumb"
             />
             <i
               class="el-icon-circle-close"
@@ -219,11 +226,28 @@
         <span>支持上传jpg，png格式，最大10M</span>
       </el-form-item>
       <el-form-item label="上传附件：">
-        <el-select v-model="uploading" placeholder="请选择">
-          <el-option label="高清图片" value="GQpicture"></el-option>
-          <el-option label="高清视频" value="GQvideo"></el-option>
+        <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-button style="margin-left: 20px">上传附件</el-button>
+        <!-- 上传附件 -->
+        <el-upload
+          class="upload-demo"
+          action="https://jsonplaceholder.typicode.com/posts/"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :before-remove="beforeRemove"
+          multiple
+          :limit="3"
+          :on-exceed="handleExceed"
+          :file-list="fileList"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+        </el-upload>
       </el-form-item>
     </el-form>
     <!-- 表格 -->
@@ -258,7 +282,12 @@
 </template>
 
 <script>
-import { holdingAdd, getGoodsNumType, getGoodsType } from '@/apis/holding'
+import axios from '@/utils/request'
+import {
+  holdingAdd,
+  getGoodsNumType,
+  getGoodsType
+} from '@/apis/holding'
 export default {
   name: 'Holding0_Dialog',
   components: {},
@@ -270,6 +299,8 @@ export default {
   },
   data () {
     return {
+      // 服务器前缀地址
+      baseURL: '',
       token: '',
       ruleForm: {
         age: '', // 年代
@@ -300,8 +331,21 @@ export default {
         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'], // 质量范围
+      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: {
@@ -311,23 +355,20 @@ export default {
         length: [{ required: true, message: '不能为空', trigger: 'blur' }]
       },
       // 上传图片和文件
-      uploading: 'GQpicture',
+      fileList: [{ name: 'food.jpeg', url: '666' }],
+      affixVal: 'video',
+      affix: [
+        { label: '模型', value: 'model' },
+        { label: '视频', value: 'video' },
+        { label: '图片', value: 'img' },
+        { label: '音频', value: 'audio' },
+        { label: '文档', value: 'doc' }
+      ],
       dialogImageUrl: '',
       dialogVisible: false,
       disabled: false,
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -336,6 +377,19 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 上传附件
+    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) {
       // 限制图片大小和格式
@@ -354,14 +408,6 @@ export default {
           resolve(file)
         }
       })
-      // if (file.type !== 'image/png' || file.type !== 'image/jpeg') {
-      //   this.$message.error('图片格式不对')
-      // } else if (file.size / 1024 / 1024 > 10) {
-      //   this.$message.error('图片大小超过10M')
-      // } else {
-      //   this.loading = true
-      //   this.$message.success('上传成功')
-      // }
     },
     upload_thumb_success (data) {
       this.loading = false
@@ -371,10 +417,10 @@ export default {
     async btnOK () {
       try {
         await this.$refs.ruleForm.validate()
-        console.log(this.ruleForm)
-        // this.ruleForm.amount = Number(this.ruleForm.amount)
-        const res = await holdingAdd(this.ruleForm)
-        console.log(6666, res)
+        // console.log(this.ruleForm)
+        this.ruleForm.amount = Number(this.ruleForm.amount)
+        await holdingAdd(this.ruleForm)
+        // console.log(6666, res)
         this.$message.success('新增成功')
         this.cancel()
       } catch (error) {
@@ -387,6 +433,8 @@ export default {
     }
   },
   created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
     // 获取用户token
     this.token = localStorage.getItem('daliCK_token')
   },

src/views/holding/holding0_add.vue

@@ -66,30 +66,30 @@
       width="40">
     </el-table-column>
               <el-table-column label="缩略图" width="146">
-                <template #default>
+                <template #default="{row}">
                   <div class="smimg">
-                    <img src="../../assets/img/user.png" alt="" />
+                    <img :src="baseURL+row.thumb" alt="" />
                   </div>
                 </template>
               </el-table-column>
               <el-table-column
-                prop="name"
+                prop="registerNum"
                 label="总登记号"
                 width="235"
               >
               </el-table-column>
-              <el-table-column prop="address"  label="藏品名称">
+              <el-table-column prop="name"  label="藏品名称">
               </el-table-column>
-              <el-table-column prop="name"  label="类别" width="130">
+              <el-table-column prop="goodsTypeId"  label="类别" width="130">
               </el-table-column>
-              <el-table-column prop="name"  label="完残程度" width="220">
+              <el-table-column prop="integrity"  label="完残程度" width="220">
               </el-table-column>
-              <el-table-column prop="name" label="藏品年代" width="130">
+              <el-table-column prop="age" label="藏品年代" width="130">
               </el-table-column>
               <el-table-column label="操作" width="130">
-                <template #default>
+                <template #default="{row}">
                   <el-button type="text" @click="isShow=true">编 辑</el-button>
-                  <el-button type="text">删 除</el-button>
+                  <el-button type="text" @click="deletes(row.id)">删 除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -108,6 +108,8 @@
 </template>
 
 <script>
+import axios from '@/utils/request'
+import { getHoldingList, removeOne } from '@/apis/holding'
 import TabList from '@/components/tabLeft.vue'
 import Holding0Dialog from './holding0_Dialog.vue'
 export default {
@@ -118,6 +120,18 @@ export default {
   },
   data () {
     return {
+      // 服务器前缀地址
+      baseURL: '',
+      // 请求藏品登记列表参数
+      mydata: {
+        startTime: '', // 开始时间
+        endTime: '', // 结束时间
+        pageNum: 1, // 起始页码，默认1为第一页
+        pageSize: 10, // 每页数量
+        searchKey: '', // 搜索条件
+        status: '', // 状态
+        type: '' // 类型
+      },
       // 控制弹出层显示隐藏
       isShow: false,
       // 表单数据
@@ -139,18 +153,7 @@ export default {
         textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
       },
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: []
 
     }
   },
@@ -160,12 +163,45 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击删除单个
+    async deletes (id) {
+      this.$confirm('确定删除码?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        // 发请求，清空数据
+        await removeOne(id)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+        this.getHoldingList(this.mydata)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消.'
+        })
+      })
+    },
+    // 获取藏品登记列表
+    async getHoldingList (data) {
+      const res = await getHoldingList(data)
+      // console.log(res)
+      this.tableData = res.data.list
+    },
+
     skip (index) {
       this.$router.push(`/layout/holding${index}`).catch(() => {})
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 调用藏品登记方法
+    this.getHoldingList(this.mydata)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前