2023-5-26

yxt-supervise-cyf/yxt-supervise-cyf-ui/.env.development

@@ -5,9 +5,9 @@ ENV = 'development'
 VUE_APP_BASE_API = '/api'
 
 ## 配置测试和本地开发时的 接口地址
-# VUE_APP_URL = "http://5wchzg.natappfree.cc"
+ VUE_APP_URL = "http://cg9jzr.natappfree.cc"
-VUE_APP_URL = "http://192.168.1.177:7101"
+## VUE_APP_URL = "http://192.168.1.177:7101"
 
 
-# VUE_APP_URL = "http://192.168.1.193:7101"
+## VUE_APP_URL = "http://192.168.1.193:7101"
 ##VUE_APP_URL = "http://8.130.39.13:8112"

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/api/packagInAndOutBound/packagInAndOutBound.js

@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+let tokens = window.sessionStorage.getItem('tokenValue')
+export default {
+
+  // 获取包装物类型
+  typeList: function(params) {
+    return request({
+      url: '/cyf/packtype/typeList',
+      method: 'post',
+      data: params,
+      headers: {
+        'Content-Type': 'application/json',
+        'token': tokens
+      }
+    })
+  },
+
+  // 获取包装物信息 by 类型sid
+  PackagList: function(sid) {
+    return request({
+      url: '/cyf/packinventory/getInventory/' + sid
+    })
+  },
+
+
+
+  // 入库
+  logPagerList: function(params) {
+    return request({
+      url: '/cyf/packstorage/listPage',
+      method: 'post',
+      data: params,
+      headers: {
+        'Content-Type': 'application/json',
+        'token': tokens
+      }
+    })
+  },
+
+  intAddInfo: function(data) {
+    return request({
+      url: '/cyf/packstorage/save',
+      method: 'post',
+      data: data
+    });
+  },
+
+
+  // 出库
+  // 查询分页列表
+  in112PagerList: function(params) {
+    return request({
+      url: '/cyf/packoutbound/listPage',
+      method: 'post',
+      data: params,
+      headers: {
+        'Content-Type': 'application/json',
+        'token': tokens
+      }
+    })
+  },
+
+  outAddInfo: function(data) {
+    return request({
+      url: '/cyf/packoutbound/save',
+      method: 'post',
+      data: data
+    });
+  },
+
+
+  // 盘库 
+  inventoryPagerList: function(params) {
+    return request({
+      url: '/cyf/packrecord/listPage',
+      method: 'post',
+      data: params,
+      headers: {
+        'Content-Type': 'application/json',
+        'token': tokens
+      }
+    })
+  },
+
+  inventoryAddInfo: function(data) {
+    return request({
+      url: '/cyf/packrecord/save',
+      method: 'post',
+      data: data
+    });
+  },
+
+
+}

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/layout/components/Sidebar/index.vue

@@ -2,33 +2,29 @@
   <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
+      <el-menu :default-active="$route.path" :background-color="variables.menuBg" :text-color="variables.menuText"
-        :default-active="$route.path"
+        :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false"
-        :background-color="variables.menuBg"
+        mode="vertical">
-        :text-color="variables.menuText"
+        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="route in routes"
-          :key="route.path"
-          :item="route"
-          :base-path="route.path"
-        />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+  import {
+    mapGetters
+  } from "vuex";
   import Logo from "./Logo";
   import SidebarItem from "./SidebarItem";
   import variables from "@/styles/variables.scss";
-import { getrolemenus, loginDetails } from "@/api/system/Role/role.js";
+  import {
-import { getStorage } from "@/utils/auth";
+    getrolemenus,
+    loginDetails
+  } from "@/api/system/Role/role.js";
+  import {
+    getStorage
+  } from "@/utils/auth";
   export default {
     components: {
       SidebarItem,
@@ -42,8 +38,7 @@ export default {
           sourceSid: "9d048c07-7677-4774-9177-aa02b049ff06",
           userSid: "",
         },
-      routes: [
+        routes: [{
-        {
             alwaysShow: true,
             component: "supervise",
             meta: {
@@ -52,8 +47,7 @@ export default {
             },
             name: "",
             path: "/supervise",
-          children: [
+            children: [{
-            {
                 alwaysShow: true,
                 component: "index",
                 meta: {
@@ -83,6 +77,36 @@ export default {
                 name: "/supervise/oilTypeOutBound",
                 path: "/supervise/oilTypeOutBound",
               },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物入库登记",
+                },
+                name: "/supervise/packagInBound",
+                path: "/supervise/packagInBound",
+              },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物出库登记",
+                },
+                name: "/supervise/packagOutBound",
+                path: "/supervise/packagOutBound",
+              },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物盘库登记",
+                },
+                name: "/supervise/packagInventory",
+                path: "/supervise/packagInventory",
+              },
               {
                 alwaysShow: true,
                 component: "index",
@@ -114,13 +138,12 @@ export default {
             },
             name: "",
             path: "/inventory",
-          children: [
+            children: [{
-            {
                 alwaysShow: true,
                 component: "index",
                 meta: {
                   icon: "el-icon-help",
-                title: "油罐库存记录",
+                  title: "油罐登记库存记录",
                 },
                 name: "/inventory/oilTankList",
                 path: "/inventory/oilTankList",
@@ -150,11 +173,41 @@ export default {
                 component: "index",
                 meta: {
                   icon: "el-icon-help",
-                title: "库存信息",
+                  title: "油罐库存信息",
                 },
                 name: "/inventory/oilTankInfo",
                 path: "/inventory/oilTankInfo",
               },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物入库记录",
+                },
+                name: "/inventory/packagInBoundList",
+                path: "/inventory/packagInBoundList",
+              },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物出库记录",
+                },
+                name: "/inventory/packagOutBoundList",
+                path: "/inventory/packagOutBoundList",
+              },
+              {
+                alwaysShow: true,
+                component: "index",
+                meta: {
+                  icon: "el-icon-help",
+                  title: "包装物盘库记录",
+                },
+                name: "/inventory/packagInventoryList",
+                path: "/inventory/packagInventoryList",
+              },
               {
                 alwaysShow: true,
                 component: "index",
@@ -196,8 +249,7 @@ export default {
             },
             name: "",
             path: "/baseInfo",
-          children: [
+            children: [{
-            {
                 alwaysShow: true,
                 component: "index",
                 meta: {
@@ -218,24 +270,22 @@ export default {
                 path: "/baseInfo/materialInfo",
               },
               {
-              alwaysShow: true,
+                path: '/baseInfo/packagType',
-              component: "index",
+                component: () =>
+                  import('@/views/baseInfo/packagType/index.vue'),
+                name: 'index',
                 meta: {
-                icon: "el-icon-help",
+                  title: '包装物类型'
-                title: "包装物类型",
+                }
-              },
-              name: "/baseInfo/packagType",
-              path: "/baseInfo/packagType",
               },
               {
-              alwaysShow: true,
+                path: '/baseInfo/packagInfo',
-              component: "index",
+                component: () =>
+                  import('@/views/baseInfo/packagInfo/index.vue'),
+                name: 'index',
                 meta: {
-                icon: "el-icon-help",
+                  title: '包装物信息'
-                title: "包装物信息",
+                }
-              },
-              name: "/baseInfo/packagInfo",
-              path: "/baseInfo/packagInfo",
               },
               {
                 alwaysShow: true,

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/router/index.js

@@ -175,6 +175,33 @@ export const constantRoutes = [{
           title: '原油出库登记'
         }
       },
+      {
+        path: '/supervise/packagInBound',
+        component: () =>
+          import('@/views/supervise/packagInBound/index.vue'),
+        name: 'index',
+        meta: {
+          title: '包装物入库登记'
+        }
+      },
+      {
+        path: '/supervise/packagOutBound',
+        component: () =>
+          import('@/views/supervise/packagOutBound/index.vue'),
+        name: 'index',
+        meta: {
+          title: '包装物出库登记'
+        }
+      },
+      {
+        path: '/supervise/packagInventory',
+        component: () =>
+          import('@/views/supervise/packagInventory/index.vue'),
+        name: 'index',
+        meta: {
+          title: '包装物盘库登记'
+        }
+      },
       {
         path: '/supervise/EnterRegister',
         component: () =>
@@ -203,12 +230,20 @@ export const constantRoutes = [{
     },
     children: [
       {
+        path: '/inventory/oilTankInfo',
+        component: () =>
+          import('@/views/inventory/oilTankInfo/index.vue'),
+        name: 'index',
+        meta: {
+          title: '油罐库存信息'
+        }
+      },{
         path: '/inventory/oilTankList',
         component: () =>
           import('@/views/inventory/oilTankList/index.vue'),
         name: 'index',
         meta: {
-          title: '油罐库存记录'
+          title: '油罐登记库存记录'
         }
       }, {
         path: '/inventory/oilTypeInBoundList',
@@ -228,13 +263,32 @@ export const constantRoutes = [{
           title: '原油出库记录'
         }
       },
+     
       {
-        path: '/inventory/oilTankInfo',
+        path: '/supervise/packagInBound',
         component: () =>
-          import('@/views/inventory/oilTankInfo/index.vue'),
+          import('@/views/supervise/packagInBound/index.vue'),
+        name: 'index',
+        meta: {
+          title: '包装物入库登记'
+        }
+      },
+      {
+        path: '/supervise/packagOutBound',
+        component: () =>
+          import('@/views/supervise/packagOutBound/index.vue'),
+        name: 'index',
+        meta: {
+          title: '包装物出库登记'
+        }
+      },
+      {
+        path: '/supervise/packagInventory',
+        component: () =>
+          import('@/views/supervise/packagInventory/index.vue'),
         name: 'index',
         meta: {
-          title: '库存信息'
+          title: '包装物盘库登记'
         }
       },
       {

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/oilTankInfo/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <div v-show="viewState ==1">
-      <button-bar view-title="油罐信息" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+      <button-bar view-title="油罐库存信息信息" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" />
       <div class="main-content">
         <div class="listtop">
-          <div class="tit">油罐列表</div>
+          <div class="tit">油罐库存列表</div>
         </div>
         <div >
           <el-table ref="looktable" v-loading="listLoading" height="585" :data="list" border  :summary-method="getSummaries" show-summary style="width: 100%;" >

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/packagInBoundList/index.vue

@@ -0,0 +1,389 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState ==1">
+      <button-bar ref="btnbar" view-title="包装物入库记录" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="clicksearchShow">
+            {{ searchxianshitit }}
+          </el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form ref="queryParams" :model="jmdListQuery" :inline="true" class="tab-header">
+              <el-form-item label="合同编号">
+                <el-input v-model="jmdListQuery.contractNumber" maxlength="20" placeholder="请输入合同编号" class="addinputw"
+                  clearable />
+              </el-form-item>
+              <el-form-item label="入库日期">
+                <el-date-picker v-model="jmdListQuery.date" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
+                  placeholder="选择日期" />
+              </el-form-item>
+            </el-form>
+            <div class="btn" style="text-align: center;">
+              <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
+              <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <el-table v-loading="tableLoading1" :data="logList" border style="width: 100%">
+            <el-table-column fixed width="100" type="index" label="序号" :index="indexMethod" align="center" />
+            <el-table-column prop="contractNumber" label="合同编号" align="center" />
+            <el-table-column prop="supplierName" label="供货商" width="150" align="center" />
+            <el-table-column prop="contractSigningDate" label="合同日期" width="150" align="center" />
+            <el-table-column prop="licensePlateNumber" label="发货车牌号" width="150" align="center" />
+            <el-table-column prop="warehousingDate" label="入库日期" width="150" align="center" />
+            <el-table-column prop="typeName" label="包装物类型" width="150" align="center" />
+            <el-table-column prop="name" label="包装物名称" width="150" align="center" />
+            <el-table-column prop="weight" label="收料净重" width="150" align="center" />
+            <el-table-column prop="value" label="收料价值" width="150" align="center" />
+            <el-table-column prop="inventory" label="收料后库存" width="150" align="center" />
+            <el-table-column  fixed="right" label="操作" width="100" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="purchase(scope.row)"
+              >
+                查看详情
+              </el-button>
+            </template>
+          </el-table-column>
+          </el-table>
+        </div>
+        <div class="pages">
+          <!-- 翻页 -->
+          <pagination v-show="logListTotal > 0" :total="logListTotal" :page.sync="logListQuery.current"
+            :limit.sync="logListQuery.size" class="pagination" @pagination="loadLogList" />
+        </div>
+
+      </div>
+      <el-dialog
+      :title="dialogTitle + '详细信息'"
+      :visible.sync="editDialog"
+      width="60%"
+    >
+    <el-form ref="dataForm" :model="form" label-position="top" label-width="190px" class="formadd">
+      <div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
+            <div>原油信息</div>
+          </div>
+        <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">销售合同编号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">签订时间</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractSigningDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">净重</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.weight}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">价值</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.value}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">发货车牌号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.licensePlateNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">入库日期</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.warehousingDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="描述:" >
+        <el-popover placement="left" trigger="hover">
+          <img :src="form.url" style="width: 600px;height: 600px">
+          <img slot="reference" :src="form.url" style="width: 200px;height: 200px">
+         </el-popover>
+      </el-form-item>
+        </el-form>
+    </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import Pagination from '@/components/pagination'
+  import {
+    parseTime
+  } from '@/utils/index'
+  import ButtonBar from '@/components/ButtonBar'
+  export default {
+    components: {
+      ButtonBar,
+      Pagination,
+    },
+    data() {
+      return {
+        viewState: 1,
+        tabActiveName: 'uplog',
+        index: "0",
+        isSearchShow: false,
+        searchxianshitit: '显示查询条件',
+        btndisabled: false,
+        tableLoading1: false,
+        tableLoading2: false,
+        dialogTitle:'',
+        editDialog:false,
+        form:{},
+        btnList: [ // 右上角按钮
+          // {
+          //   type: 'success',
+          //   size: 'small',
+          //   icon: 'export',
+          //   btnKey: 'build',
+          //   btnLabel: '导出'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd1',
+          //   btnLabel: '新增入库记录'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd2',
+          //   btnLabel: '新增出库记录'
+          // },
+          {
+            type: 'info',
+            size: 'small',
+            icon: 'cross',
+            btnKey: 'doClose',
+            btnLabel: '关闭'
+          }
+        ],
+        logList: [],
+        logListQuery: {
+          current: 1,
+          size: 10
+        },
+        logListTotal: 1,
+        jmdListQuery: {
+          contractNumber: "",
+          date: ""
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
+      }
+    },
+    mounted() {
+      // 初始化按钮
+      this.$refs['btnbar'].setButtonList(this.btnList)
+    },
+    created() {
+      // 初始化变量
+      this.init()
+    },
+    methods: {
+      // 搜索条件效果
+      clicksearchShow() {
+        this.isSearchShow = !this.isSearchShow
+        if (this.isSearchShow) {
+          this.searchxianshitit = '隐藏查询条件'
+        } else {
+          this.searchxianshitit = '显示查询条件'
+        }
+      },
+      dosearch() {
+
+        this.loadLogList()
+      },
+      resetQuery() {
+        this.jmdListQuery = {
+          contractNumber: "",
+          date: ""
+        }
+      },
+      // 右上角点击事件
+      btnHandle(btnKey) {
+        switch (btnKey) {
+          case 'toAdd1': // 新增入库
+            this.doAdd1()
+            break
+          case 'toAdd2': // 新增出库
+            this.doAdd2()
+            break
+          case 'build': // 导出
+            this.doBuild()
+            break
+          case 'doClose': // 关闭
+            this.doClose()
+            break
+          default:
+            break
+        }
+      },
+      init() {
+        this.loadLogList()
+      },
+      purchase(row){
+        this.dialogTitle = "数据";
+        this.editDialog = true;
+        req.selectStorageBySid(row.sid).then((res)=>{
+          this.form=res.data
+        })
+      },
+      handleOrder(tab, event) {
+        console.log("tab", tab)
+        // this.listQuery.status = tab.name;
+        // this.getList();
+        // this.orderDatas(tab.name);
+
+        this.index = tab.index
+
+        switch (tab.index) {
+          // 入库
+          case "0":
+            if (this.logList.length == 0)
+              this.loadLogList()
+            break;
+            // 出库
+          case "1":
+            if (this.in112List.length == 0)
+              this.loadIn112List()
+            break;
+          default:
+            break;
+        }
+
+      },
+      loadLogList() {
+        req.logPagerList({
+          current: this.logListQuery.current,
+          size: this.logListQuery.size,
+          params: this.jmdListQuery
+        }).then(response => {
+          if (response.code === '200' && response.data && response.data.total > 0) {
+            this.logList = response.data.records
+            this.logListTotal = response.data.total
+            this.logListQuery.current = response.data.current
+            this.logListQuery.size = response.data.size
+          } else {
+            this.logList = []
+            this.logListTotal = 0
+          }
+        })
+      },
+      // 序号
+      indexMethod(index) {
+        var pagestart = (this.logListQuery.current - 1) * this.logListQuery.size
+        var pageindex = index + 1 + pagestart
+        return pageindex
+      },
+    
+      doAdd1() {
+        this.viewState = 2
+      },
+      doAdd2() {
+        this.viewState = 3
+      },
+
+
+      // 导出文件
+      doBuild() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        exportExcel(this.jmdListQuery).then((resp) => {
+          loading.close()
+          const blob = new Blob([resp], {
+            type: 'application/vnd.ms-excel;charset=UTF-8'
+          })
+          const fileName = '库存明细列表' + '.xls'
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'nonde'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+        }).catch(() => {
+          loading.close()
+        })
+
+      },
+
+      resetState() {
+        this.viewState = 1
+      },
+      doClose() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .wenjiantit {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 25px 0 10px 0;
+  }
+
+  .forminfo {
+    margin: 0;
+    padding: 0;
+  }
+
+  .listcon {
+    height: calc(100vh - 250px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/packagInventoryList/index.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState ==1">
+      <button-bar ref="btnbar" view-title="包装物入库记录" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="clicksearchShow">
+            {{ searchxianshitit }}
+          </el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form ref="queryParams" :model="jmdListQuery" :inline="true" class="tab-header">
+              <el-form-item label="包装物名称">
+                <el-input v-model="jmdListQuery.contractNumber" maxlength="20" placeholder="请输入包装物名称" class="addinputw"
+                  clearable />
+              </el-form-item>
+              <el-form-item label="盘库日期">
+                <el-date-picker v-model="jmdListQuery.date" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
+                  placeholder="选择日期" />
+              </el-form-item>
+            </el-form>
+            <div class="btn" style="text-align: center;">
+              <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
+              <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </div>
+          </div>
+        </div>
+        <div>
+          <el-table v-loading="tableLoading1" :data="logList" border style="width: 100%">
+            <el-table-column fixed width="100" type="index" label="序号" :index="indexMethod" align="center" />
+            <el-table-column prop="inventoryDate" label="盘库日期" align="center" />
+            <el-table-column prop="typeName" label="包装物类型"  align="center" />
+            <el-table-column prop="name" label="包装物名称"  align="center" />
+            <el-table-column prop="inventory" label="库存" align="center" />
+            <el-table-column prop="value" label="价值" align="center" />
+           <!-- <el-table-column  fixed="right" label="操作" width="100" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="purchase(scope.row)"
+              >
+                查看详情
+              </el-button>
+            </template>
+          </el-table-column> -->
+          </el-table>
+        </div>
+        <div class="pages">
+          <!-- 翻页 -->
+          <pagination v-show="logListTotal > 0" :total="logListTotal" :page.sync="logListQuery.current"
+            :limit.sync="logListQuery.size" class="pagination" @pagination="loadLogList" />
+        </div>
+
+      </div>
+      <el-dialog
+      :title="dialogTitle + '详细信息'"
+      :visible.sync="editDialog"
+      width="60%"
+    >
+    <el-form ref="dataForm" :model="form" label-position="top" label-width="190px" class="formadd">
+      <div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
+            <div>原油信息</div>
+          </div>
+        <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">销售合同编号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">签订时间</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractSigningDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">净重</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.weight}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">价值</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.value}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">发货车牌号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.licensePlateNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">入库日期</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.warehousingDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="描述:" >
+        <el-popover placement="left" trigger="hover">
+          <img :src="form.url" style="width: 600px;height: 600px">
+          <img slot="reference" :src="form.url" style="width: 200px;height: 200px">
+         </el-popover>
+      </el-form-item>
+        </el-form>
+    </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import Pagination from '@/components/pagination'
+  import {
+    parseTime
+  } from '@/utils/index'
+  import ButtonBar from '@/components/ButtonBar'
+  export default {
+    components: {
+      ButtonBar,
+      Pagination,
+    },
+    data() {
+      return {
+        viewState: 1,
+        tabActiveName: 'uplog',
+        index: "0",
+        isSearchShow: false,
+        searchxianshitit: '显示查询条件',
+        btndisabled: false,
+        tableLoading1: false,
+        tableLoading2: false,
+        dialogTitle:'',
+        editDialog:false,
+        form:{},
+        btnList: [ // 右上角按钮
+          // {
+          //   type: 'success',
+          //   size: 'small',
+          //   icon: 'export',
+          //   btnKey: 'build',
+          //   btnLabel: '导出'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd1',
+          //   btnLabel: '新增入库记录'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd2',
+          //   btnLabel: '新增出库记录'
+          // },
+          {
+            type: 'info',
+            size: 'small',
+            icon: 'cross',
+            btnKey: 'doClose',
+            btnLabel: '关闭'
+          }
+        ],
+        logList: [],
+        logListQuery: {
+          current: 1,
+          size: 10
+        },
+        logListTotal: 1,
+        jmdListQuery: {
+          contractNumber: "",
+          date: ""
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
+      }
+    },
+    mounted() {
+      // 初始化按钮
+      this.$refs['btnbar'].setButtonList(this.btnList)
+    },
+    created() {
+      // 初始化变量
+      this.init()
+    },
+    methods: {
+      // 搜索条件效果
+      clicksearchShow() {
+        this.isSearchShow = !this.isSearchShow
+        if (this.isSearchShow) {
+          this.searchxianshitit = '隐藏查询条件'
+        } else {
+          this.searchxianshitit = '显示查询条件'
+        }
+      },
+      dosearch() {
+
+        this.loadLogList()
+      },
+      resetQuery() {
+        this.jmdListQuery = {
+          contractNumber: "",
+          date: ""
+        }
+      },
+      // 右上角点击事件
+      btnHandle(btnKey) {
+        switch (btnKey) {
+          case 'toAdd1': // 新增入库
+            this.doAdd1()
+            break
+          case 'toAdd2': // 新增出库
+            this.doAdd2()
+            break
+          case 'build': // 导出
+            this.doBuild()
+            break
+          case 'doClose': // 关闭
+            this.doClose()
+            break
+          default:
+            break
+        }
+      },
+      init() {
+        this.loadLogList()
+      },
+      purchase(row){
+        this.dialogTitle = "数据";
+        this.editDialog = true;
+        req.selectStorageBySid(row.sid).then((res)=>{
+          this.form=res.data
+        })
+      },
+      handleOrder(tab, event) {
+        console.log("tab", tab)
+        // this.listQuery.status = tab.name;
+        // this.getList();
+        // this.orderDatas(tab.name);
+
+        this.index = tab.index
+
+        switch (tab.index) {
+          // 入库
+          case "0":
+            if (this.logList.length == 0)
+              this.loadLogList()
+            break;
+            // 出库
+          case "1":
+            if (this.in112List.length == 0)
+              this.loadIn112List()
+            break;
+          default:
+            break;
+        }
+
+      },
+      loadLogList() {
+        req.inventoryPagerList({
+          current: this.logListQuery.current,
+          size: this.logListQuery.size,
+          params: this.jmdListQuery
+        }).then(response => {
+          if (response.code === '200' && response.data && response.data.total > 0) {
+            this.logList = response.data.records
+            this.logListTotal = response.data.total
+            this.logListQuery.current = response.data.current
+            this.logListQuery.size = response.data.size
+          } else {
+            this.logList = []
+            this.logListTotal = 0
+          }
+        })
+      },
+      // 序号
+      indexMethod(index) {
+        var pagestart = (this.logListQuery.current - 1) * this.logListQuery.size
+        var pageindex = index + 1 + pagestart
+        return pageindex
+      },
+
+      doAdd1() {
+        this.viewState = 2
+      },
+      doAdd2() {
+        this.viewState = 3
+      },
+
+
+      // 导出文件
+      doBuild() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        exportExcel(this.jmdListQuery).then((resp) => {
+          loading.close()
+          const blob = new Blob([resp], {
+            type: 'application/vnd.ms-excel;charset=UTF-8'
+          })
+          const fileName = '库存明细列表' + '.xls'
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'nonde'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+        }).catch(() => {
+          loading.close()
+        })
+
+      },
+
+      resetState() {
+        this.viewState = 1
+      },
+      doClose() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .wenjiantit {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 25px 0 10px 0;
+  }
+
+  .forminfo {
+    margin: 0;
+    padding: 0;
+  }
+
+  .listcon {
+    height: calc(100vh - 250px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/inventory/packagOutBoundList/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="app-container">
+    <div v-show="viewState ==1">
+      <button-bar ref="btnbar" view-title="包装物出库记录" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+      <div class="main-content">
+        <div class="searchcon">
+          <el-button size="small" class="searchbtn" @click="clicksearchShow">
+            {{ searchxianshitit }}
+          </el-button>
+          <div v-show="isSearchShow" class="search">
+            <el-form ref="queryParams" :model="jmdListQuery" :inline="true" class="tab-header">
+              <el-form-item label="合同编号">
+                <el-input v-model="jmdListQuery.contractNumber" maxlength="20" placeholder="请输入合同编号" class="addinputw"
+                  clearable />
+              </el-form-item>
+              <el-form-item label="出库日期">
+                <el-date-picker v-model="jmdListQuery.date" type="date" :picker-options="pickerOptions" clearable value-format="yyyy-MM-dd"
+                  placeholder="选择日期" />
+              </el-form-item>
+            </el-form>
+            <div class="btn" style="text-align: center;">
+              <el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button>
+              <el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <el-table v-loading="tableLoading2" :data="in112List" border style="width: 100%">
+            <el-table-column fixed width="100" type="index" label="序号" :index="indexMethod2" align="center" />
+            <el-table-column prop="salesContractNumber" label="合同编号" align="center" />
+            <el-table-column prop="contractSigningDate" label="合同日期" width="150" align="center" />
+            <el-table-column prop="deliveryDate" label="出库日期" width="150" align="center" />
+            <el-table-column prop="typeName" label="包装物类型" width="150" align="center" />
+            <el-table-column prop="name" label="包装物名称" width="150" align="center" />
+            <el-table-column prop="weight" label="净重" width="150" align="center" />
+            <el-table-column prop="value" label="价值" width="150" align="center" />
+            <el-table-column prop="inventory" label="库存剩余净重" width="150" align="center" />
+            <el-table-column  fixed="right" label="操作" width="100" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                size="mini"
+                @click="purchase(scope.row)"
+              >
+                查看详情
+              </el-button>
+            </template>
+          </el-table-column>
+          </el-table>
+        </div>
+        <div class="pages">
+          <!-- 翻页 -->
+          <pagination v-show="in112ListTotal > 0" :total="in112ListTotal" :page.sync="in112ListQuery.current"
+            :limit.sync="in112ListQuery.size" class="pagination" @pagination="loadIn112List" />
+        </div>
+      </div>
+
+    </div>
+    <el-dialog
+      :title="dialogTitle + '详细信息'"
+      :visible.sync="editDialog"
+      width="60%"
+    >
+    <el-form ref="dataForm" :model="form" label-position="top" label-width="190px" class="formadd">
+      <div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px">
+            <div>原油信息</div>
+          </div>
+        <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">销售合同编号</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.salesContractNumber}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">签订时间</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.contractSigningDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">净重</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.weight}}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">价值</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.value}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="trightb">
+              <el-form-item class="trightb_item">
+                <span slot="label">出库日期</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item class="trightb_item">
+                <span>{{form.deliveryDate}}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="描述:">
+        <el-popover placement="left" trigger="hover">
+          <img :src="form.url" style="width: 500px;height: 500px">
+          <img slot="reference" :src="form.url" style="width: 150px;height: 150px">
+         </el-popover>
+      </el-form-item>
+        </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import Pagination from '@/components/pagination'
+  import {
+    parseTime
+  } from '@/utils/index'
+  import ButtonBar from '@/components/ButtonBar'
+  export default {
+    components: {
+      ButtonBar,
+      Pagination,
+    },
+    data() {
+      return {
+        viewState: 1,
+        tabActiveName: 'uplog',
+        index: "0",
+        isSearchShow: false,
+        searchxianshitit: '显示查询条件',
+        btndisabled: false,
+        tableLoading1: false,
+        tableLoading2: false,
+        dialogTitle:'',
+        editDialog:false,
+        form:{},
+        btnList: [ // 右上角按钮
+          // {
+          //   type: 'success',
+          //   size: 'small',
+          //   icon: 'export',
+          //   btnKey: 'build',
+          //   btnLabel: '导出'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd1',
+          //   btnLabel: '新增入库记录'
+          // },
+          // {
+          //   type: 'primary',
+          //   size: 'small',
+          //   icon: 'plus',
+          //   btnKey: 'toAdd2',
+          //   btnLabel: '新增出库记录'
+          // },
+          {
+            type: 'info',
+            size: 'small',
+            icon: 'cross',
+            btnKey: 'doClose',
+            btnLabel: '关闭'
+          }
+        ],
+        logList: [],
+        logListQuery: {
+          current: 1,
+          size: 10
+        },
+        logListTotal: 1,
+        in112List: [],
+        in112ListQuery: {
+          current: 1,
+          size: 10
+        },
+        in112ListTotal: 1,
+
+        jmdListQuery: {
+          contractNumber: "",
+          date: ""
+        },
+        pickerOptions:{
+          disabledDate(time){
+          return time.getTime()> Date.now();// 如果没有后面的-8.64e7就是不可以选择今天的
+          }
+      }
+      }
+    },
+    mounted() {
+      // 初始化按钮
+      this.$refs['btnbar'].setButtonList(this.btnList)
+    },
+    created() {
+      // 初始化变量
+      this.init()
+    },
+    methods: {
+      // 搜索条件效果
+      clicksearchShow() {
+        this.isSearchShow = !this.isSearchShow
+        if (this.isSearchShow) {
+          this.searchxianshitit = '隐藏查询条件'
+        } else {
+          this.searchxianshitit = '显示查询条件'
+        }
+      },
+      dosearch() {
+        this.loadIn112List()
+      },
+      purchase(row){
+        this.dialogTitle = "数据";
+        this.editDialog = true;
+        req.getCrudeBySid(row.sid).then((res)=>{
+          this.form=res.data
+        })
+      },
+      resetQuery() {
+        this.jmdListQuery = {
+          contractNumber: "",
+          date: ""
+        }
+      },
+      // 右上角点击事件
+      btnHandle(btnKey) {
+        switch (btnKey) {
+          case 'toAdd1': // 新增入库
+            this.doAdd1()
+            break
+          case 'toAdd2': // 新增出库
+            this.doAdd2()
+            break
+          case 'build': // 导出
+            this.doBuild()
+            break
+          case 'doClose': // 关闭
+            this.doClose()
+            break
+          default:
+            break
+        }
+      },
+      init() {
+        this.loadIn112List()
+      },
+      handleOrder(tab, event) {
+        console.log("tab", tab)
+        // this.listQuery.status = tab.name;
+        // this.getList();
+        // this.orderDatas(tab.name);
+
+        this.index = tab.index
+
+        switch (tab.index) {
+          // 入库
+          case "0":
+            if (this.logList.length == 0)
+              this.loadLogList()
+            break;
+            // 出库
+          case "1":
+            if (this.in112List.length == 0)
+              this.loadIn112List()
+            break;
+          default:
+            break;
+        }
+
+      },
+      loadIn112List() {
+        req.in112PagerList({
+          current: this.in112ListQuery.current,
+          size: this.in112ListQuery.size,
+          params: this.jmdListQuery
+        }).then(response => {
+          if (response.code === '200' && response.data && response.data.total > 0) {
+            this.in112List = response.data.records
+            this.in112ListTotal = response.data.total
+            this.in112ListQuery.current = response.data.current
+            this.in112ListQuery.size = response.data.size
+          } else {
+            this.in112List = []
+            this.in112ListTotal = 0
+          }
+        })
+      },
+      // 序号
+      indexMethod2(index) {
+        var pagestart = (this.in112ListQuery.current - 1) * this.in112ListQuery.size
+        var pageindex = index + 1 + pagestart
+        return pageindex
+      },
+      doAdd1() {
+        this.viewState = 2
+      },
+      doAdd2() {
+        this.viewState = 3
+      },
+
+
+      // 导出文件
+      doBuild() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        exportExcel(this.jmdListQuery).then((resp) => {
+          loading.close()
+          const blob = new Blob([resp], {
+            type: 'application/vnd.ms-excel;charset=UTF-8'
+          })
+          const fileName = '库存明细列表' + '.xls'
+          const elink = document.createElement('a')
+          elink.download = fileName
+          elink.style.display = 'nonde'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+        }).catch(() => {
+          loading.close()
+        })
+
+      },
+
+      resetState() {
+        this.viewState = 1
+      },
+      doClose() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .wenjiantit {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 25px 0 10px 0;
+  }
+
+  .forminfo {
+    margin: 0;
+    padding: 0;
+  }
+
+  .listcon {
+    height: calc(100vh - 250px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/oilTypeInBound/index.vue

@@ -3,7 +3,7 @@
 
     <div class="tab-header webtop">
       <!-- 标题 -->
-      <div>入库记录登记</div>
+      <div>原油入库登记</div>
       <!-- start 添加修改按钮 -->
       <div>
         <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
@@ -172,6 +172,8 @@
             console.log(">>>>>>>>>111111111111wwwwwwwwww", res.data)
             this.tankLists = res.data
             this.tankList = []
+			this.formobj.tankName =""
+			this.formobj.tankSid =""
             for (var i = 0; i < this.tankLists.length; i++) {
 
               let item = {

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/oilTypeOutBound/index.vue

@@ -3,7 +3,7 @@
 
     <div class="tab-header webtop">
       <!-- 标题 -->
-      <div>出库记录登记</div>
+      <div>原油出库登记</div>
       <!-- start 添加修改按钮 -->
       <div>
         <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
@@ -145,6 +145,8 @@
             console.log(">>>>>>>>>111111111111wwwwwwwwww", res.data)
             this.tankLists = res.data
                  this.tankList =[]
+				 this.formobj.tankName =""
+				 this.formobj.tankSid =""
             for (var i = 0; i < this.tankLists.length; i++) {
 
               let item = {

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/packagInBound/index.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>包装物入库登记</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+
+      <el-card class="box-card">
+        <div class="item">
+          <span class="item_text">合同编号：</span>
+          <el-input v-model="formobj.contractNumber" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">供货商名称：</span>
+          <el-select v-model="formobj.supplierName" filterable placeholder="请选择供货商名称" class="item_input"
+            @change="getSupplier">
+            <el-option v-for="item in supplierList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+        </div>
+        <div class="item">
+          <span class="item_text">合同日期：</span>
+          <el-date-picker v-model="formobj.contractSigningDate" type="date" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+          <span class="item_text">发货车牌号：</span>
+          <el-input v-model="formobj.licensePlateNumber" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">入库日期：</span>
+          <el-date-picker v-model="formobj.warehousingDate" type="date" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+          <span class="item_text">包装物类型：</span>
+          <el-select v-model="formobj.typeName" filterable placeholder="请选择包装物名称" class="item_input" @change="getType">
+            <el-option v-for="item in typeList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">包装物名称：</span>
+          <el-select v-model="formobj.packagName" filterable placeholder="请选择包装物名称" class="item_input"
+            @change="getPackag">
+            <el-option v-for="item in packagList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">收料净重：</span>
+          <el-input v-model="formobj.weight" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">收料价值：</span>
+          <el-input v-model="formobj.value" placeholder="" class="item_input" clearable />
+        </div>
+
+        <div class="item">
+          <span class="item_text">备注：</span>
+          <el-input v-model="formobj.remarks" placeholder="" class="item_input" clearable />
+        </div>
+        <!-- <div class="item" style="margin-top: 70px;">
+          <span class="item_text">登记材料：</span>
+          <upload class="item_input" ref="uploadImg" v-model="imgList" @change="backData" bucket="map"
+            :upload-data="{ type: '0001' }"></upload>
+
+        </div> -->
+      </el-card>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import req3 from '@/api/supplier/supplier'
+  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao'
+  export default {
+    components: {
+      upload
+    },
+    data() {
+      return {
+        submitdisabled: false,
+        supplierLists: [],
+        supplierList: [],
+        typeLists: [],
+        typeList: [],
+        packagLists: [],
+        packagList: [],
+        imgList: [],
+        formobj: {
+          sid: "",
+          contractNumber: "",
+          contractSigningDate: "",
+          warehousingDate: "",
+          typeSid: "",
+          typeName: "",
+          packagName: "",
+          weight: "",
+          value: "",
+          supplierSid: "",
+          supplierName: "",
+          licensePlateNumber: "",
+          remarks: "",
+          crudeOilStorageFile: [],
+
+        }
+      }
+    },
+    created() {
+      this.supplierInfoList()
+      this.getTypeList()
+    },
+    methods: {
+      supplierInfoList() {
+        req3.supplierList().then((res) => {
+          if (res.success) {
+            console.log(">>>>>>>>>2222222", res.data)
+            this.supplierLists = res.data
+            for (var i = 0; i < this.supplierLists.length; i++) {
+
+              let item = {
+                name: this.supplierLists[i].supplierName,
+                sid: this.supplierLists[i].sid,
+
+              }
+              this.supplierList.push(item)
+            }
+
+          }
+        })
+      },
+      getTypeList() {
+        req.typeList().then((res) => {
+          if (res.success) {
+            console.log(">>>>>>>>>2222222", res.data)
+            this.typeLists = res.data
+
+            for (var i = 0; i < this.typeLists.length; i++) {
+
+              let item = {
+                name: this.typeLists[i].name,
+                sid: this.typeLists[i].sid,
+
+              }
+              this.typeList.push(item)
+            }
+
+          }
+        })
+      },
+      getPackagList(sid) {
+        req.PackagList(sid).then((res) => {
+          if (res.success) {
+            console.log(">>>>>>>>>2222222", res.data)
+            this.packagLists = res.data
+            this.packagList = []
+            this.formobj.packagName = ""
+            this.formobj.inventorySid = ""
+            for (var i = 0; i < this.packagLists.length; i++) {
+
+              let item = {
+                name: this.packagLists[i].name,
+                sid: this.packagLists[i].sid,
+
+              }
+              this.packagList.push(item)
+            }
+
+          }
+        })
+      },
+      saveOrUpdate() {
+        req.intAddInfo(this.formobj)
+          .then(resp => {
+            if (resp.success) {
+              this.$message({
+                showClose: true,
+                type: 'success',
+                message: resp.msg
+              })
+              this.formobj = {
+                sid: "",
+                contractNumber: "",
+                contractSigningDate: "",
+                warehousingDate: "",
+                typeSid: "",
+                typeName: "",
+                packagName: "",
+                weight: "",
+                value: "",
+                supplierSid: "",
+                supplierName: "",
+                licensePlateNumber: "",
+                remarks: "",
+                crudeOilStorageFile: [],
+
+              }
+              this.imgList = []
+            } else {
+              // 根据resp.code进行异常情况处理
+            }
+          })
+          .catch(() => {})
+
+      },
+      handleReturn() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      },
+      getSupplier(value) {
+        console.log(">>>>>>>>>getType", value)
+        const choose = this.supplierLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getType", choose[0])
+        this.formobj.supplierName = choose[0].supplierName
+        this.formobj.supplierSid = value
+      },
+      getType(value) {
+        console.log(">>>>>>>>>getType", value)
+        const choose = this.typeLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getType", choose[0])
+        this.formobj.typeName = choose[0].name
+        this.formobj.typeSid = value
+        this.getPackagList(value)
+      },
+      getPackag(value) {
+        console.log(">>>>>>>>>getPackag", value)
+        const choose = this.packagLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getPackag", choose[0])
+        this.formobj.packagName = choose[0].name
+        this.formobj.inventorySid = value
+      },
+      backData(value) {
+        console.log("backData>>>>>", value)
+        const aa = []
+        if (value.length > 0 && value != null && value != undefined) {
+          for (var i = 0; i < value.length; i++) {
+            aa.push(value[i].url)
+          }
+        }
+        this.formobj.crudeOilStorageFile = aa
+
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .box-card {
+    margin-left: 60px;
+    margin-right: 60px;
+    min-width: 70%;
+    margin-top: 20px;
+    padding-bottom: 50px;
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 15px;
+      height: 40px;
+      line-height: 40px;
+
+      .item_text {
+        flex: 0.8;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .item_input {
+        flex: 4;
+        font-size: 16px;
+        margin-left: 10px;
+        margin-right: 80px;
+      }
+
+      .item_left_input {
+        width: 20%;
+      }
+
+      .item_left_text {
+        height: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        color: #018AD2;
+        padding: 0px 15px;
+        border: 1.5px solid #018AD2;
+        border-radius: 5px;
+
+      }
+
+      .item_right {
+        flex: 1;
+        justify-items: center;
+
+        .item_right_list_text {
+          font-size: 16px;
+        }
+
+        .item_right_list_delect {
+          color: #5E94FF;
+          margin-left: 20px;
+          font-size: 16px;
+          text-decoration: underline;
+        }
+      }
+
+    }
+
+  }
+</style>

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/packagInventory/index.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>包装物盘库登记</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+
+      <el-card class="box-card">
+        <div class="item">
+          <span class="item_text">包装物类型：</span>
+          <el-select v-model="formobj.typeName" filterable placeholder="请选择包装物名称" class="item_input" @change="getType">
+            <el-option v-for="item in typeList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">包装物名称：</span>
+          <el-select v-model="formobj.packagName" filterable placeholder="请选择包装物名称" class="item_input"
+            @change="getPackag">
+            <el-option v-for="item in packagList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">库存：</span>
+          <el-input v-model="formobj.inventory" placeholder="" @input="limitInput1($event,'slPrice')" class="item_input"
+            clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">价值：</span>
+          <el-input v-model="formobj.value" placeholder="" @input="limitInput2($event,'slPrice')" class="item_input"
+            clearable />
+        </div>
+
+        <!-- <div class="item" style="margin-top: 70px;">
+        <span class="item_text">登记材料：</span>
+          <upload class="item_input"  ref="uploadImg" v-model="imgList" :limit="3" @change="backData"
+            bucket="map" :upload-data="{ type: '0001' }"></upload>
+
+        </div> -->
+      </el-card>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao'
+  export default {
+    components: {
+      upload
+    },
+    data() {
+      return {
+        submitdisabled: false,
+       typeLists: [],
+       typeList: [],
+       packagLists: [],
+       packagList: [],
+        imgList: [],
+        formobj: {
+          typeName: "",
+          inventorySid: "",
+          packagName: "",
+          value: "",
+          inventory: "",
+        }
+      }
+    },
+    created() {
+      this.getTypeList()
+    },
+    methods: {
+      /**
+       * 1、必须为数字
+       * 2、只能有一个小数点
+       * 3、小数点后保留两位小数
+       * 4、当第一位输入小数点的时候自动补全，补为 0.
+       * 5、除非是小数，否则数字不能以0开头
+       * @param {string} values - 输入的值
+       * @param {string} name - 匹配的对象属性 [mkPrice | slPrice]
+       */
+      limitInput1(values, name) {
+        this.formobj.inventory =
+          ("" + values) // 第一步：转成字符串
+          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
+          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
+          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
+          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
+      },
+      /**
+       * 1、必须为数字
+       * 2、只能有一个小数点
+       * 3、小数点后保留两位小数
+       * 4、当第一位输入小数点的时候自动补全，补为 0.
+       * 5、除非是小数，否则数字不能以0开头
+       * @param {string} values - 输入的值
+       * @param {string} name - 匹配的对象属性 [mkPrice | slPrice]
+       */
+      limitInput2(values, name) {
+        this.formobj.value =
+          ("" + values) // 第一步：转成字符串
+          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
+          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
+          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
+          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
+      },
+     getTypeList() {
+       req.typeList().then((res) => {
+         if (res.success) {
+           console.log(">>>>>>>>>2222222", res.data)
+           this.typeLists = res.data
+
+           for (var i = 0; i < this.typeLists.length; i++) {
+
+             let item = {
+               name: this.typeLists[i].name,
+               sid: this.typeLists[i].sid,
+
+             }
+             this.typeList.push(item)
+           }
+
+         }
+       })
+     },
+     getPackagList(sid) {
+       req.PackagList(sid).then((res) => {
+         if (res.success) {
+           console.log(">>>>>>>>>2222222", res.data)
+           this.packagLists = res.data
+           this.packagList = []
+           this.formobj.packagName = ""
+           this.formobj.inventorySid = ""
+           for (var i = 0; i < this.packagLists.length; i++) {
+
+             let item = {
+               name: this.packagLists[i].name,
+               sid: this.packagLists[i].sid,
+
+             }
+             this.packagList.push(item)
+           }
+
+         }
+       })
+     },
+      saveOrUpdate() {
+        console.log(">>>>>>>>>111111111111wwwwwwwwww", this.formobj)
+        req.inventoryAddInfo(this.formobj)
+          .then(resp => {
+            if (resp.success) {
+              this.$message({
+                showClose: true,
+                type: 'success',
+                message: resp.msg
+              })
+              this.formobj = {
+                typeName: "",
+                inventorySid: "",
+                packagName: "",
+                value: "",
+                inventory: "",
+
+              }
+              this.imgList = []
+            } else {
+              // 根据resp.code进行异常情况处理
+            }
+          })
+          .catch(() => {})
+
+      },
+      handleReturn() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      },
+      getType(value) {
+        console.log(">>>>>>>>>getType", value)
+        const choose = this.typeLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getType", choose[0])
+        this.formobj.typeName = choose[0].name
+        this.formobj.typeSid = value
+        this.getPackagList(value)
+      },
+      getPackag(value) {
+        console.log(">>>>>>>>>getPackag", value)
+        const choose = this.packagLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getPackag", choose[0])
+        this.formobj.packagName = choose[0].name
+        this.formobj.inventorySid = value
+      },
+      backData(value) {
+        console.log("backData>>>>>", value)
+        const aa = []
+        if (value.length > 0 && value != null && value != undefined) {
+          for (var i = 0; i < value.length; i++) {
+            aa.push(value[i].url)
+          }
+        }
+        this.formobj.crudeOilRecordFile = aa
+
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .box-card {
+    margin-left: 60px;
+    margin-right: 60px;
+    min-width: 70%;
+    margin-top: 20px;
+    padding-bottom: 50px;
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 15px;
+      height: 40px;
+      line-height: 40px;
+
+      .item_text {
+        flex: 0.8;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .item_input {
+        flex: 4;
+        font-size: 16px;
+        margin-left: 10px;
+        margin-right: 80px;
+      }
+
+      .item_left_input {
+        width: 20%;
+      }
+
+      .item_left_text {
+        height: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        color: #018AD2;
+        padding: 0px 15px;
+        border: 1.5px solid #018AD2;
+        border-radius: 5px;
+
+      }
+
+      .item_right {
+        flex: 1;
+        justify-items: center;
+
+        .item_right_list_text {
+          font-size: 16px;
+        }
+
+        .item_right_list_delect {
+          color: #5E94FF;
+          margin-left: 20px;
+          font-size: 16px;
+          text-decoration: underline;
+        }
+      }
+
+    }
+
+  }
+</style>

yxt-supervise-cyf/yxt-supervise-cyf-ui/src/views/supervise/packagOutBound/index.vue

@@ -0,0 +1,275 @@
+<template>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>包装物出库登记</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+
+      <el-card class="box-card">
+        <div class="item">
+          <span class="item_text">合同编号：</span>
+          <el-input v-model="formobj.salesContractNumber" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">合同日期：</span>
+          <el-date-picker v-model="formobj.contractSigningDate" type="date" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+          <span class="item_text">出库日期：</span>
+          <el-date-picker v-model="formobj.deliveryDate" type="date" format="yyyy-MM-dd" class="item_input"
+            value-format="yyyy-MM-dd" placeholder="请选择" />
+        </div>
+        <div class="item">
+          <span class="item_text">包装物类型：</span>
+          <el-select v-model="formobj.typeName" filterable placeholder="请选择包装物名称" class="item_input" @change="getType">
+            <el-option v-for="item in typeList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">包装物名称：</span>
+          <el-select v-model="formobj.packagName" filterable placeholder="请选择包装物名称" class="item_input"
+            @change="getPackag">
+            <el-option v-for="item in packagList" :key="item.sid" :label="item.name" :value="item.sid" />
+          </el-select>
+          <!-- <el-input v-model="formobj.number" placeholder="" class="item_input" clearable /> -->
+        </div>
+        <div class="item">
+          <span class="item_text">净重：</span>
+          <el-input v-model="formobj.weight" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">价值：</span>
+          <el-input v-model="formobj.value" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">备注：</span>
+          <el-input v-model="formobj.remarks" placeholder="" class="item_input" clearable />
+        </div>
+        <!-- <div class="item" style="margin-top: 70px;">
+          <span class="item_text">登记材料：</span>
+          <upload class="item_input" ref="uploadImg" v-model="imgList" @change="backData" bucket="map"
+            :upload-data="{ type: '0001' }"></upload>
+
+        </div> -->
+      </el-card>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import req from '@/api/packagInAndOutBound/packagInAndOutBound'
+  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao'
+  export default {
+    components: {
+      upload
+    },
+    data() {
+      return {
+        submitdisabled: false,
+        typeLists: [],
+        typeList: [],
+        packagLists: [],
+        packagList: [],
+        imgList: [],
+        formobj: {
+          sid: "",
+          salesContractNumber: "",
+          contractSigningDate: "",
+          deliveryDate: "",
+          typeSid: "",
+          typeName: "",
+          packagName: "",
+          weight: "",
+          value: "",
+          remarks: "",
+          crudeOilOutboundFiles: [],
+
+        }
+      }
+    },
+    created() {
+      this.getTypeList()
+    },
+    methods: {
+      getTypeList() {
+        req.typeList().then((res) => {
+          if (res.success) {
+            console.log(">>>>>>>>>2222222", res.data)
+            this.typeLists = res.data
+
+            for (var i = 0; i < this.typeLists.length; i++) {
+
+              let item = {
+                name: this.typeLists[i].name,
+                sid: this.typeLists[i].sid,
+
+              }
+              this.typeList.push(item)
+            }
+
+          }
+        })
+      },
+      getPackagList(sid) {
+        req.PackagList(sid).then((res) => {
+          if (res.success) {
+            console.log(">>>>>>>>>2222222", res.data)
+            this.packagLists = res.data
+            this.packagList = []
+            this.formobj.packagName = ""
+            this.formobj.inventorySid = ""
+            for (var i = 0; i < this.packagLists.length; i++) {
+
+              let item = {
+                name: this.packagLists[i].name,
+                sid: this.packagLists[i].sid,
+
+              }
+              this.packagList.push(item)
+            }
+
+          }
+        })
+      },
+      saveOrUpdate() {
+          console.log(">>>>>>>>>saveOrUpdate",this.formobj)
+        req.outAddInfo(this.formobj)
+          .then(resp => {
+            if (resp.success) {
+              this.$message({
+                showClose: true,
+                type: 'success',
+                message: resp.msg
+              })
+              this.formobj = {
+                sid: "",
+                salesContractNumber: "",
+                contractSigningDate: "",
+                deliveryDate: "",
+                typeSid: "",
+                typeName: "",
+                packagName: "",
+                weight: "",
+                value: "",
+                remarks: "",
+                crudeOilOutboundFiles: [],
+              }
+              this.imgList = []
+            } else {
+              // 根据resp.code进行异常情况处理
+            }
+          })
+          .catch(() => {})
+
+      },
+      handleReturn() {
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.go(-1)
+      },
+      getType(value) {
+        console.log(">>>>>>>>>getType", value)
+        const choose = this.typeLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getType", choose[0])
+        this.formobj.typeName = choose[0].name
+        this.formobj.typeSid = value
+        this.getPackagList(value)
+      },
+      getPackag(value) {
+        console.log(">>>>>>>>>getPackag", value)
+        const choose = this.packagLists.filter((item) => item.sid === value)
+        console.log(">>>>>>>>>getPackag", choose[0])
+        this.formobj.packagName = choose[0].name
+        this.formobj.inventorySid = value
+      },
+      backData(value) {
+        console.log("backData>>>>>", value)
+        const aa = []
+        if (value.length > 0 && value != null && value != undefined) {
+          for (var i = 0; i < value.length; i++) {
+            aa.push(value[i].url)
+          }
+        }
+        this.formobj.crudeOilOutboundFiles = aa
+
+      },
+    }
+  }
+</script>
+<style lang="scss">
+  .box-card {
+    margin-left: 60px;
+    margin-right: 60px;
+    min-width: 70%;
+    margin-top: 20px;
+    padding-bottom: 50px;
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 15px;
+      height: 40px;
+      line-height: 40px;
+
+      .item_text {
+        flex: 0.8;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .item_input {
+        flex: 4;
+        font-size: 16px;
+        margin-left: 10px;
+        margin-right: 80px;
+      }
+
+      .item_left_input {
+        width: 20%;
+      }
+
+      .item_left_text {
+        height: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        color: #018AD2;
+        padding: 0px 15px;
+        border: 1.5px solid #018AD2;
+        border-radius: 5px;
+
+      }
+
+      .item_right {
+        flex: 1;
+        justify-items: center;
+
+        .item_right_list_text {
+          font-size: 16px;
+        }
+
+        .item_right_list_delect {
+          color: #5E94FF;
+          margin-left: 20px;
+          font-size: 16px;
+          text-decoration: underline;
+        }
+      }
+
+    }
+
+  }
+</style>