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

5 years ago · 1031fc086c
parent d52f56865b
commit 1031fc086c
4 changed files with 122 additions and 116 deletions
--- a/src/views/checkManage/checkOperation.vue
+++ b/src/views/checkManage/checkOperation.vue
@ -191,8 +191,8 @@
    </div>
 </template>
 <script>
-    import Model from "./model.vue"
-    import {imgUrl} from "@/api/importExcel";
+import Model from "./model.vue"
+import {imgUrl} from "@/api/importExcel";
 export default {
    data() {
        return {
--- a/src/views/checkManage/model.vue
+++ b/src/views/checkManage/model.vue
@ -42,114 +42,114 @@
    </div>
 </template>
 <script>
-    var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
-        labelCol: {span: 8},    //lable长度
-        wrapperCol: {span: 14},  //input长度
-    };
-    var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
-        labelCol: {span: 4},
-        wrapperCol: {span: 8, offset: 4},
-    };
-    export default {
-        props: ['visible', 'modelData', 'index'],
-        watch: {
-            //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
-            visible: function (newVal) {
-                this.isShow = newVal;  //newVal即是visible
-                // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
-            },
-            modelData: function (newVal) {
-                console.log(newVal)
-                this.mData = newVal
-                this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
-                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
-                        category: newVal.category,
-                        count: newVal.count
-                    })
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: {span: 8},    //lable长度
+    wrapperCol: {span: 14},  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: {span: 4},
+    wrapperCol: {span: 8, offset: 4},
+};
+export default {
+    props: ['visible', 'modelData', 'index'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function (newVal) {
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelData: function (newVal) {
+            console.log(newVal)
+            this.mData = newVal
+            this.$nextTick(() => {   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                    category: newVal.category,
+                    count: newVal.count
                })
+            })

-            },
-            index: function (newVal) {
-                this.i = newVal;
-            },
        },
-        data() {
-            return {
-                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
-            };
+        index: function (newVal) {
+            this.i = newVal;
        },
-        mounted() {
-            console.log('mounted执行了')
-        },
-        methods: {
-            handleOk() {
-                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 => {
+    },
+    data() {
+        return {
+            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执行了')
+    },
+    methods: {
+        handleOk() {
+            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.searchList = res.data
-                        if (res.data.length > 0) {
-                            this.searchListShow = true
-                        }
+                });
+                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.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 {
--- a/src/views/historyMonitoring/index.vue
+++ b/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">
-            <template>
-                <span v-if="text.pics">
-                    <viewer :images="text.pics">
-                       <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
-                            :key="index"/>
-                    </viewer>
-                </span>
-                <span v-else>
-                    暂无图片
-                </span>
-            </template>
+          <span slot="pics" slot-scope="text" style="width:auto">
+
+          <template>
+              <span v-if="text.pics" style="height:100%;">
+                  <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
+                      <viewer :images="text.pics">
+                         <img class="historyImg" v-for="(src,index) in text.pics" :src="imgUrl+src"
+                              :key="index"/>
+                      </viewer>
+                  </happy-scroll>
+              </span>
+              <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>
--- a/src/views/repertoryManage/index.vue
+++ b/src/views/repertoryManage/index.vue
@ -33,7 +33,7 @@


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