优化工序库的出入库记录页面布局

Signed-off-by: AiNoeLiYa <jzbcxy@gmail.com>

src/api/processLibrary/InventoryRecord.js

 import request from '@/utils/request'
 
 export function listLog(queryParams) {
+  console.log('this is date:', queryParams.dateRange)
   return request({
     url: '/wbwarehouselog/queryWbWarehouseLogByPagination',
     method: 'get',

src/components/Table/BaseTable/index.vue

 <template>
-  <div>
+  <div style="padding:5px 10px">
     <div class="mb12 font-small-bold">{{ allTableArguments.listName }}</div>
-    <div class="tableList" style="height:600px;">
+    <div class="tableList" style=" height:600px;">
       <el-scrollbar style="height: 100%;">
         <el-table
           v-loading="allTableArguments.loading"
@@ -11,46 +11,6 @@
           style="width: 100%"
           @selection-change="handleSelectionChange"
         >
-          <!--          <el-table-column type="index" label="序号" width="50" :index="allTableArguments.nIndex" />-->
-          <!--          <el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.processName || '-' }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!--          <el-table-column label="生产车间" prop="workshop">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.workshop || '-' }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!--          <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!--          <el-table-column label="操作人" prop="createBy" width="210px">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.createBy || '-' }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!--          <el-table-column-->
-          <!--            label="操作"-->
-          <!--            class-name="small-padding fixed-width"-->
-          <!--            width="180px"-->
-          <!--          >-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <div class="processListBtns">-->
-          <!--                <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">-->
-          <!--                  详情-->
-          <!--                </el-button>-->
-          <!--                <el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">-->
-          <!--                  修改-->
-          <!--                </el-button>-->
-          <!--                <el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">-->
-          <!--                  删除-->
-          <!--                </el-button>-->
-          <!--              </div>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
 
           <el-table-column type="index" label="序号" width="50" :index="allTableArguments.nIndex" />
 
@@ -100,14 +60,14 @@
               <!-- 操作按钮 -->
               <span v-if="column.isOperation" class="processListBtns">
                 <span v-for="(operations, index) in column.operation" :key="index">
-                  <el-button v-if="operations.isShow(row,$index)" :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="operations.buttonClick(row,$index)">{{ operations.label }}</el-button>
+                  <el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail">{{ operations.label }}</el-button>
+                  <el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate">{{ operations.label }}</el-button>
+                  <el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete">{{ operations.label }}</el-button>
                 </span>
               </span>
             </template>
           </el-table-column>
-
         </el-table>
-
       </el-scrollbar>
       <div />
     </div>
@@ -171,7 +131,7 @@ export default {
 /* TODO: 这里是控制内容列表的样式 */
 .processListBtns {
   .el-button {
-    margin: 0 7px;
+    margin: 0 12px;
   }
 }
 

src/views/processManagement/inventoryRecord/index.vue

 <template>
   <div class="app-container">
-    <el-form v-show="showSearch" ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true" label-width="68px">
+    <div class="ToolBar">
+      <el-form v-show="showSearch" ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
 
-      <el-form-item label="设备编码" prop="pn">
+        <el-form-item label="pn" prop="pn">
           <el-input
             v-model="queryParams.pn"
-          placeholder="请输入设备编码"
+            placeholder="Please enter pn"
             clearable
             :maxlength="30"
             style="width: 150px;"
@@ -14,10 +15,10 @@
           />
         </el-form-item>
 
-      <el-form-item label="操作人" prop="updateBy">
+        <el-form-item label="lot" prop="lot">
           <el-input
-          v-model="queryParams.updateBy"
-          placeholder="请输入操作人"
+            v-model="queryParams.lot"
+            placeholder="Please enter lot"
             clearable
             :maxlength="30"
             style="width: 150px;"
@@ -26,10 +27,45 @@
           />
         </el-form-item>
 
-      <el-form-item>
-        <el-select v-model="queryParams.selectValue" filterable placeholder="请选择库类型">
+        <el-form-item label="plocation" prop="plocation">
+          <el-input
+            v-model="queryParams.plocation"
+            placeholder="Please enter plocation"
+            clearable
+            :maxlength="30"
+            style="width: 150px;"
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="poperate" prop="poperate">
+          <el-select
+            v-model="queryParams.poperate"
+            placeholder="库状态"
+            filterable
+            clearable
+            @keyup.enter.native="handleQuery"
+          >
             <el-option
-            v-for="option in selectOptions"
+              v-for="option in selectOptionsAboutPoperate"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="ptype" prop="ptype">
+          <el-select
+            v-model="queryParams.ptype"
+            placeholder="库类型"
+            filterable
+            clearable
+            @keyup.enter.native="handleQuery"
+          >
+            <el-option
+              v-for="option in selectOptionsAboutPtype"
               :key="option.value"
               :label="option.label"
               :value="option.value"
@@ -38,45 +74,65 @@
         </el-form-item>
 
         <el-form-item>
-        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+          <div class="block">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="yyyy-MM-dd"
+              type="datetimerange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '00:00:00']"
+            />
+          </div>
         </el-form-item>
 
         <el-form-item>
-        <el-button type="primary" size="small" icon="el-icon-search" @click="resetQuery">重置</el-button>
+          <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
         </el-form-item>
 
-      <div style="float: right">
         <el-form-item>
+          <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+
+        <!--TODO: 导出和盘点按钮所在  -->
+        <el-row :gutter="36" class="mb8" justify="start">
+          <el-col :span="1.5">
             <el-button
-            type="success"
+              type="primary"
               size="small"
-            icon="el-icon-download"
+              icon="el-icon-plus"
               @click="handleExport"
-          >盘点</el-button>
-
+            >盘点
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
             <el-button
               type="success"
               size="small"
               icon="el-icon-download"
               @click="handleExport"
-          >导出</el-button>
-        </el-form-item>
-      </div>
+            >导出
+            </el-button>
+          </el-col>
+        </el-row>
       </el-form>
 
+    </div>
+
     <!--  TODO: 分隔符-->
     <div class="placeholder" />
 
+    <!--TODO: Table表单-->
     <transition name="fade-transform" mode="out-in">
       <component
         :is="BaseTable"
         :key="queryParams.rows"
         :all-table-arguments="allTableArguments"
         @handle-detail="handleDetail"
-        @handle-update="handleUpdate"
-        @handle-delete="handleDelete"
       />
     </transition>
+    <!--TODO: 分页组件-->
     <pagination
       v-show="total>0"
       :total="total"
@@ -85,58 +141,53 @@
       @pagination="getList"
     />
 
-    <!--    清空弹窗-->
-    <el-dialog
-      title="选择清空月份"
-      :visible.sync="clearVisible"
-      width="30%"
-      :before-close="handleClose"
-    >
-      <el-form ref="clear" :model="clearFrom" :rules="clearRule">
-        <el-form-item label="月份" prop="month">
-          <el-date-picker
-            v-model="clearFrom.month"
-            type="monthrange"
-            range-separator="至"
-            start-placeholder="开始月份"
-            end-placeholder="结束月份"
-            value-format="yyyy_MM"
-            :picker-options="endDatePicker"
-            @change="timechange"
-          />
+    <!-- TODO: 单项详情信息表单配置 -->
+    <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
+      <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="pn：" prop="pn">
+              <el-input v-model.trim="singleDetails.pn" :readonly="true" />
             </el-form-item>
-        <el-form-item style="float: right;margin-top: 20px">
-          <el-button @click="clearVisible = false">取 消</el-button>
-          <el-button type="primary" @click="clear">确 定</el-button>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="lot：" prop="workshop">
+              <el-input v-model.trim="singleDetails.lot" :readonly="true" />
             </el-form-item>
-      </el-form>
-    </el-dialog>
-    <!--    导出弹窗-->
-    <el-dialog
-      title="选择盘点月份"
-      :visible.sync="exportVisible"
-      width="30%"
-      :before-close="handleClose"
-    >
-      <el-form ref="export" :model="exportFrom" :rules="exportRule">
-        <el-form-item label="月份" prop="month">
-          <el-date-picker
-            v-model="exportFrom.month"
-            type="monthrange"
-            range-separator="至"
-            start-placeholder="开始月份"
-            end-placeholder="结束月份"
-            value-format="yyyy_MM"
-            :picker-options="endDatePicker"
-            @change="timechange"
-          />
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="plocation：" prop="plocation">
+              <el-input v-model.trim="singleDetails.ptype" :readonly="true" />
             </el-form-item>
-        <el-form-item style="float: right;margin-top: 20px">
-          <el-button @click="exportVisible = false">取 消</el-button>
-          <el-button type="primary" @click="exportSubmit">确 定</el-button>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label=" 操作时间：" prop="createDate">
+              <el-input v-model.trim="singleDetails.poperate" :readonly="true" />
             </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="位置：" prop="createName">
+              <el-input v-model.trim="singleDetails.plocation" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作员：" prop="user">
+              <el-input v-model.trim="singleDetails.user" :readonly="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
       </el-form>
     </el-dialog>
+
   </div>
 </template>
 
@@ -151,50 +202,48 @@ export default {
   ],
   data() {
     return {
-      processList: [],
-      endDatePicker: this.handelFixDate(),
-      // 自定义按钮
-      deletetypePrimary: 'danger',
       textPrimary: 'text',
       deleteName: '删除',
       deleteSize: 'mini',
       deleteDisabled: 'multiple',
-      cleantypePrimary: 'danger',
       cleanName: '清空',
       cleanSize: 'small',
-      exporttypePrimary: 'success',
       exportName: '导出',
       exportSize: 'small',
       delIcon: 'el-icon-delete',
       exportIcon: 'el-icon-download',
-      clearVisible: false,
-      exportVisible: false,
-      exportFrom: {},
-      exportRule: {
-        month: [
-          { required: true, message: '请选择月份', trigger: 'change' }
-        ]
-      },
-      // 遮罩层
+
+      // TODO:遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
       // 非多个禁用
       multiple: true,
-      // 显示搜索条件
+
+      // TODO: 显示搜索条件
       showSearch: true,
-      // 总条数
+
+      // TODO: 数据总条数
       total: 0,
-      clearFrom: {},
-      clearRule: {
-        month: [
-          { required: true, message: '请选择月份', trigger: 'change' }
-        ]
+
+      // TODO: 关于 Ptype的数据字典
+      selectOptionsAboutPoperate: [
+        {
+          value: '1',
+          label: '入库'
+        }, {
+          value: '2',
+          label: '出库'
         },
-      // 表格数据
-      list: [],
+        {
+          value: '1',
+          label: '修正'
+        }, {
+          value: '2',
+          label: '废弃'
+        }
+      ],
 
-      selectOptions: [
+      // TODO: 关于 Ptype的数据字典
+      selectOptionsAboutPtype: [
         {
           value: '1',
           label: '设备库'
@@ -203,15 +252,26 @@ export default {
           label: '工序库'
         }
       ],
-      // 查询参数
+
+      // TODO: 查询参数
+      // TODO: 时间日期范围 调用全局方法来输入进去
+      dateRange: [],
       queryParams: {
         page: 1,
         rows: 10,
-        pn: '',
-        updateBy: '',
-        selectValue: ''
+        // TODO: 设备编码
+        pn: undefined,
+        // TODO: lot
+        lot: undefined,
+        // TODO: 位置
+        plocation: undefined,
+        // TODO: 库状态 1 入，2出，3修正，4废弃
+        poperate: undefined,
+        // TODO: 库类型 1设备库 2工序库
+        ptype: undefined
       },
-
+      // TODO: 用来接收数据源
+      inventoryRecordList: [],
       // TODO: 用来说明每一列的类型
       columObj: {
         // 选择框
@@ -222,13 +282,23 @@ export default {
             return true
           }
         },
-        lazy: 'true',
         // column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
         // prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
-        columnData: [{
+        columnData: [
+          {
+            text: true,
+            prop: 'pn',
+            label: '设备编码pn'
+          },
+          {
+            text: true,
+            prop: 'lot',
+            label: 'lot'
+          },
+          {
             ownDefined: true,
             prop: 'ptype',
-          label: '库类型',
+            label: '库类型ptype',
             ownDefinedReturn: (row, $index) => {
               switch (row.poperate) {
                 case '1':
@@ -240,15 +310,10 @@ export default {
               }
             }
           },
-        {
-          text: true,
-          prop: 'pn',
-          label: '设备编码'
-        },
           {
             ownDefined: true,
             prop: 'poperate',
-          label: 'poperate',
+            label: '库状态poperate',
             width: '180px',
             ownDefinedReturn: (row, $index) => {
               switch (row.poperate) {
@@ -266,65 +331,53 @@ export default {
             }
           },
           {
-          time: true,
-          prop: 'updateDate',
-          label: '操作时间',
-          align: 'center'
+            text: true,
+            prop: 'plocation',
+            label: '位置plocation',
+            sortable: false,
+            width: '150px'
           },
           {
             text: true,
-          prop: 'updateBy',
-          label: '操作人',
+            prop: 'user',
+            label: '操作员user',
             sortable: false,
-          width: '210px'
+            width: '150px'
+          },
+          {
+            time: true,
+            prop: 'updateDate',
+            label: '操作时间updateDate',
+            align: 'center'
           },
-        // 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
+          // TODO: 如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
           {
             isOperation: true,
             label: '操作',
-          width: '180px',
+            width: '100px',
             align: 'center',
             sortable: false,
             operation: [{
-            type: this.typeParent,
+              clickType: '1',
               label: '详情',
               icon: '',
               color: '',
-            size: this.size,
-            buttonClick: () => {
-              return 'this.handleDetail'
-            },
-            isShow: (row, $index) => {
-              return true
-            }
-          }, {
-            type: this.typeParent,
-            label: '修改',
-            icon: '',
-            color: '',
-            size: this.size,
-            buttonClick: () => {
-              return 'this.handleUpdate'
-            },
-            isShow: (row, $index) => {
-              return true
-            }
-          }, {
-            type: this.typeParent,
-            label: '删除',
-            icon: '',
-            color: '',
-            size: this.size,
-            buttonClick: () => {
-              return 'this.handleDelete'
-            },
-            isShow: (row, $index) => {
-              return true
-            }
+              size: this.size
             }]
           }
 
         ]
+      },
+
+      // TODO: 表单里的单项详情参数
+      singleDetails: {
+        equipmentName: '',
+        equipmentCode: '',
+        lot: '',
+        location: '',
+        thickness: '',
+        createName: '',
+        createTime: ''
       }
     }
   },
@@ -333,7 +386,7 @@ export default {
       return BaseTable
     },
 
-    // TODO:自定义分页索引，实现索引继承
+    /* TODO:自定义分页索引，实现索引继承 */
     nIndex(index) {
       // TODO: 当前页数 - 1 * 每页数据条数 + 1
       const page = this.queryParams.pageNum // TODO: 当前页码
@@ -347,7 +400,7 @@ export default {
         listName: '出入库记录列表',
         nIndex: this.nIndex,
         loading: this.loading,
-        processList: this.processList,
+        processList: this.inventoryRecordList,
         queryParams: this.queryParams,
         columObj: this.columObj
       }
@@ -364,32 +417,18 @@ export default {
     next()
   },
   created() {
-    if (this.$store.getters.searchParams[this.$route.path]) {
-      const { searchParams } = this.$store.getters; const { path } = this.$route
-      const param = JSON.parse(searchParams[path]) // 保留着的查询条件
-      this.queryParams = { ...param }
-    }
-    // this.queryParams.loginTime = this.$parseDate(new Date(), 'YYYY-MM-DD HH:mm:ss')
     this.getList()
   },
   methods: {
 
-    // 清空和导出弹出框的日期选择器禁用当前月份之后的月份
-    handelFixDate() {
-      return {
-        disabledDate(time) {
-          // 如果想蕴含本月本月 - 8.64e7 * t 就不须要了，
-          // 如果想之前的不能抉择把 > 换成 <
-          return time.getTime() > Date.now()
-        }
-      }
-    },
-    /** 查询登录日志列表 */
+    /** TODO:查询工序库的出入库记录列表 */
     getList() {
       this.loading = true
-      listLog(this.queryParams).then(response => {
-        this.total = response.rows.length
-        this.processList = response.rows
+      listLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.inventoryRecordList = response.rows
+        this.total = response.total
+        // 暂时还没写后端 this.selectOptionsAboutPoperate = selectOptionsAboutPoperate
+        // this.selectOptionsAboutPtype = selectOptionsAboutPtype
         this.loading = false
       })
     },
@@ -401,49 +440,19 @@ export default {
     // statusFormat(row, column) {
     //   return this.selectDictLabel(this.statusOptions, row.status)
     // },
-    /** 查询按钮操作 */
+    /** TODO: 查询按钮操作 */
     handleQuery() {
       this.queryParams.page = 1
       this.getList()
     },
-    /** 重置按钮操作 */
+    /** TODO: 重置按钮操作 */
     resetQuery() {
       this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.businessId)
-      this.multiple = !selection.length
-    },
-    exportSubmit() {
-      this.$refs['export'].validate((valid) => {
-        if (valid) {
-          const that = this
-          const query = {
-            beginTime: that.exportFrom.month[0],
-            endTime: that.exportFrom.month[1]
-          }
-          return exportLogininfo(query).then(response => {
-            const blob = new Blob([response])
-            const downloadElement = document.createElement('a')
-            const href = window.URL.createObjectURL(blob)// 创建下载的链接
-            downloadElement.href = href
-            downloadElement.download = '登录日志' + '.xls' // 下载后文件名
-            document.body.appendChild(downloadElement)
-            downloadElement.click()// 点击下载
-            document.body.removeChild(downloadElement)// 下载完成移除元素
-            window.URL.revokeObjectURL(href)// 释放掉blob对象
-            this.exportVisible = false
-            // this.download(response.msg)
-          })
-        }
-      })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.exportVisible = true
-      this.exportFrom = {}
+
+    handleDetail(row) {
+      console.log('success!')
     }
   }
 }
@@ -453,10 +462,21 @@ export default {
     padding: 0;
     font-size: 18px;
     .placeholder{
-      height:14px;
+      height:1.3vh;
       background-color: #F4F4F4;
       margin-bottom:10px
     }
+
+  /*TODO: 这里是调整ToolBar的样式的噢！*/
+    .ToolBar{
+      .el-form{
+        .el-form-item{
+          .el-select{
+            width: 90px;
+          }
+        }
+      }
+    }
   }
   </style>
 

src/views/system/user/index.vue

@@ -184,8 +184,8 @@
         <pagination
           v-show="total>0"
           :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
+          :page.sync="queryParams.page"
+          :limit.sync="queryParams.rows"
           @pagination="getList"
         />
       </el-col>
@@ -529,8 +529,8 @@ export default {
       },
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 10,
+        page: 1,
+        rows: 10,
         username: undefined,
         email: undefined,
         phone: undefined,