历史回放页面图片列宽自适应

src/views/checkManage/checkOperation.vue

@@ -191,8 +191,8 @@
     </div>
 </template>
 <script>
-    import Model from "./model.vue"
+import Model from "./model.vue"
-    import {imgUrl} from "@/api/importExcel";
+import {imgUrl} from "@/api/importExcel";
 export default {
     data() {
         return {

src/views/checkManage/model.vue

@@ -42,114 +42,114 @@
     </div>
 </template>
 <script>
-    var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
-        labelCol: {span: 8},    //lable长度
+    labelCol: {span: 8},    //lable长度
-        wrapperCol: {span: 14},  //input长度
+    wrapperCol: {span: 14},  //input长度
-    };
+};
-    var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
-        labelCol: {span: 4},
+    labelCol: {span: 4},
-        wrapperCol: {span: 8, offset: 4},
+    wrapperCol: {span: 8, offset: 4},
-    };
+};
-    export default {
+export default {
-        props: ['visible', 'modelData', 'index'],
+    props: ['visible', 'modelData', 'index'],
-        watch: {
+    watch: {
-            //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
-            visible: function (newVal) {
+        visible: function (newVal) {
-                this.isShow = newVal;  //newVal即是visible
+            this.isShow = newVal;  //newVal即是visible
-                // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
-            },
+        },
-            modelData: function (newVal) {
+        modelData: function (newVal) {
-                console.log(newVal)
+            console.log(newVal)
-                this.mData = newVal
+            this.mData = newVal
-                this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
-                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
-                        category: newVal.category,
+                    category: newVal.category,
-                        count: newVal.count
+                    count: newVal.count
-                    })
                 })
+            })
 
-            },
-            index: function (newVal) {
-                this.i = newVal;
-            },
         },
-        data() {
+        index: function (newVal) {
-            return {
+            this.i = newVal;
-                isShow: false,
-                title: '',
-                closable: false,//取消model模态框右上角的X号
-                confirmLoading: false,
-                form: this.$form.createForm(this, {name: 'dynamic_rule'}),
-                formItemAcrossLayout,
-                formItemVerticalLayout,
-                category: '',
-                searchList: [],
-                searchListShow: false,
-                mData: {},
-                i: 0
-            };
         },
-        mounted() {
+    },
-            console.log('mounted执行了')
+    data() {
-        },
+        return {
-        methods: {
+            isShow: false,
-            handleOk() {
+            title: '',
-                this.confirmLoading = true;
+            closable: false,//取消model模态框右上角的X号
-                setTimeout(() => {
+            confirmLoading: false,
-                    this.form.validateFields((err, values) => {
+            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
-                        console.log(values)
+            formItemAcrossLayout,
-                        if (!err) {
+            formItemVerticalLayout,
-                            this.$api.httpApi.stockCheckByMan({
+            category: '',
-                                data: {
+            searchList: [],
-                                    ...values,
+            searchListShow: false,
-                                    column: this.mData.column,
+            mData: {},
-                                    row: this.mData.row,
+            i: 0
-                                    shelveId: this.mData.shelveId,
+        };
-                                }
+    },
-                            }).then(res => {
+    mounted() {
-                                if (res.code == 200) {
+        console.log('mounted执行了')
-                                    this.$emit('sure', false, this.i)
+    },
-                                    this.$message.success('复核成功');
+    methods: {
-                                }
+        handleOk() {
-                            }).catch(err => {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        this.$api.httpApi.stockCheckByMan({
+                            data: {
+                                ...values,
+                                column: this.mData.column,
+                                row: this.mData.row,
+                                shelveId: this.mData.shelveId,
+                            }
+                        }).then(res => {
+                            if (res.code == 200) {
+                                this.$emit('sure', false, this.i)
+                                this.$message.success('复核成功');
+                            }
+                        }).catch(err => {
 
-                            });
+                        });
-                        }
-                    });
-                    this.confirmLoading = false;
-                }, 500);
-            },
-            handleCancel() {
-                console.log('Clicked cancel button');
-                this.$emit('close', false, {})
-            },
-            onInput(value) {
-                console.log(this.form.getFieldValue('category'))
-                //获取具体输入框的值
-                var name = this.form.getFieldValue('category')
-                this.$api.httpApi.getCategoryList({
-                    params: {
-                        name: name,
                     }
-                }).then(res => {
+                });
-                    if (res.code == 200) {
+                this.confirmLoading = false;
-                        this.searchList = res.data
+            }, 500);
-                        if (res.data.length > 0) {
+        },
-                            this.searchListShow = true
+        handleCancel() {
-                        }
+            console.log('Clicked cancel button');
+            this.$emit('close', false, {})
+        },
+        onInput(value) {
+            console.log(this.form.getFieldValue('category'))
+            //获取具体输入框的值
+            var name = this.form.getFieldValue('category')
+            this.$api.httpApi.getCategoryList({
+                params: {
+                    name: name,
+                }
+            }).then(res => {
+                if (res.code == 200) {
+                    this.searchList = res.data
+                    if (res.data.length > 0) {
+                        this.searchListShow = true
                     }
-                }).catch(err => {
+                }
+            }).catch(err => {
 
-                });
+            });
-            },
-            select(name) {
-                this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
-                    category: name,
-                })
-                this.searchListShow = false
-            }
         },
-    };
+        select(name) {
+            this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                category: name,
+            })
+            this.searchListShow = false
+        }
+    },
+};
 </script>
 <style lang="scss" scoped>
     .p-model {

src/views/historyMonitoring/index.vue

@@ -22,6 +22,7 @@
                 </a-row>
             </a-form>
         </div>
+
         <a-table
             :columns="columns"
             :row-key="record => record.id"
@@ -32,18 +33,22 @@
           <span slot="streetType" slot-scope="text">
                {{ text === null ? '-' : text === 0 ? '单伸' : '双伸' }}
           </span>
-            <span slot="pics" slot-scope="text">
+          <span slot="pics" slot-scope="text" style="width:auto">
-            <template>
+
-                <span v-if="text.pics">
+          <template>
-                    <viewer :images="text.pics">
+              <span v-if="text.pics" style="height:100%;">
-                       <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
+                  <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
-                            :key="index"/>
+                      <viewer :images="text.pics">
-                    </viewer>
+                         <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
-                </span>
+                              :key="index"/>
-                <span v-else>
+                      </viewer>
-                    暂无图片
+                  </happy-scroll>
-                </span>
+              </span>
-            </template>
+              <span v-else>
+                  暂无图片
+              </span>
+          </template>
+
           </span>
             <span slot="status" slot-scope="text">
               <span :style="text.status == 1 ?' color:red': ''">
@@ -119,10 +124,10 @@ export default {
                     dataIndex: "startTime",
                 },
                 {
-                    title: "照片（入库 货位 出库）",
+                    title: "照片",
                     // dataIndex: "pic",
                     scopedSlots: {customRender: 'pics'},
-                    width: 300
+                    width:320,
                 },
                 {
                     title: "视频状态",
@@ -241,6 +246,7 @@ export default {
 
 .historyImg {
     width: 80px;
+    height:auto;
     margin: 5px;
 }
 </style>

src/views/repertoryManage/index.vue

@@ -33,7 +33,7 @@
 
 
 <script>
-    import {importStockExcelUrl} from "@/api/importExcel";
+import {importStockExcelUrl} from "@/api/importExcel";
 const columns = [
     {
         title: 'ID',