two

src/api/production/gxpn.js

@@ -12,24 +12,25 @@ export function getlist(queryParams) {
   })
 }
 
-/* TODO: 用来查询单项出入库记录的废弃详情信息 */
-export function findSingleLogDetail(singleLogIdAndPn) {
+// TODO: 用来进行工序库的出入库记录的 分页+时间+普通字段的查询
+export function getDictList(queryParams) {
   return request({
-    url: '/wbchemistrylog/detail',
-    method: 'post',
-    data: singleLogIdAndPn,
+    url: '/ysgxpn/querySysDictDatas',
+    method: 'get',
+    params: queryParams,
     headers: {
       'Content-Type': 'application/json;charset=UTF-8'
     }
   })
 }
 
-/* TODO: 用来导出表单信息 */
-export function exportInventoryRecord(params) {
+export function submit(queryParams) {
   return request({
-    url: '/wbchemistrylog/export',
-    method: 'get',
-    params,
-    responseType: 'blob'
+    url: '/ysgxpn/insert',
+    method: 'post',
+    data: queryParams,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
   })
 }

src/views/production/data/index.vue

 <template>
-  <div class="app-container">
+  <div class="app-container" style="padding-top: 60px;">
+
+
+    <div style="width: 60%; margin-left: 80px; padding-left: 8.6%">
       <el-form
       ref="queryForm"
-      style="padding: 0 0 0 10px"
       :model="queryParams"
       :inline="true"
+      label-width="60px"
     >
-      <el-form-item label="" prop="ptype">
+        <el-form-item style="flex-basis: 50%" prop="ptype">
           <el-input
             v-model="queryParams.ptype"
-          placeholder="请输入"
+            placeholder="请输入工序"
             clearable
-          :maxlength="30"
+            :maxlength="100"
             size="small"
-          style="width: 225px"
+            style="width: 350px"
             @keyup.enter.native="handleQuery"
-        />
+          >
+          <template slot="prepend">工序</template></el-input>
         </el-form-item>
-
       <el-form-item>
         <el-button
           type="primary"
@@ -28,93 +31,118 @@
         >
       </el-form-item>
     </el-form>
-    <!-- 这里是列表了，注意，这是分割线 -->
-    <!-- 这里是列表了，注意，这是分割线 -->
-    <!-- 这里是列表了，注意，这是分割线 -->
-    <!-- 这里是列表了，注意，这是分割线 -->
-    <!-- 这里是列表了，注意，这是分割线 -->
-    <div class="placeholder" />
-    <div style="padding: 5px 10px">
-      <div class="mb12 font-small-bold">工序对照列表</div>
       <el-table
+        :gutter="40"
         v-loading="loading"
         border
-        ref="multipleTable"
-        :data="simulateProcessList"
-        @selection-change="handleSelectionChange"
+        ref="dictTable"
+        row-key="index"
+        :data="dictList"
+        @selection-change="handleDictSelectionChange"
       >
-        <el-table-column type="selection" width="50px" />
-        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column
+          :reserve-selection="true"
+          type="selection"
+          width="50px"
+        />
+        <el-table-column type="index" label="序号" width="100" />
 
         <el-table-column
           label="工序"
-          prop="ptype"
+          prop="dictLabel"
           :show-overflow-tooltip="true"
         >
           <template slot-scope="scope">
-            {{ scope.row.ptype || '-' }}
+            {{ scope.row.dictLabel || '-' }}
           </template>
         </el-table-column>
 
         <el-table-column
           label="工序代码"
-          prop="pgx"
+          prop="dictValue"
           :show-overflow-tooltip="true"
         >
           <template slot-scope="scope">
-            {{ scope.row.pgx || '-' }}
+            {{ scope.row.dictValue || '-' }}
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <el-button style="float: right" type="primary" @click="onSubmit"
-      >提交</el-button
-    >
+    <el-form label-width="80px">
+      <el-row style="padding-left: 8.6%; padding-top: 1%">
+        <el-col :span="12">
+          <el-form-item style="flex-basis: 50%">
+            <el-button type="primary" @click="onSubmit">提交</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
   </div>
 </template>
 
 <script>
-import { getlist } from '@/api/production/gxpn'
+import { getDictList, submit } from '@/api/production/gxpn'
 export default {
   name: 'Role',
   data() {
     return {
-      // TODO: 模拟测试数据
-      simulateProcessList: [],
+      dictList: [],
       // 遮罩层
       loading: true,
       // 选中数组
       multipleSelection: [],
+      dictSelection: [],
       queryParams: {
-        pgx: undefined,
-        ptype: undefined
+        ptype: ''
       }
     }
   },
   created() {
-    this.getListToGx()
+    this.getDictList()
   },
   methods: {
-    /** 查询列表 */
-    getListToGx() {
-      this.loading = true
-      getlist(this.queryParams).then(res => {
-        console.log(res.data)
-        this.simulateProcessList = res.data
+    getDictList() {
+      getDictList({
+        dictLabel: this.queryParams.ptype
+      }).then(res => {
+        this.dictList = res.data
         this.loading = false
       })
     },
     //提交按钮
     onSubmit() {
-
+      console.log(this.dictSelection)
+      submit(this.dictSelection).then(res => {
+        if (res.code === 200) {
+          this.$message.success('提交成功')
+          this.$refs.dictTable.clearSelection()
+          this.queryParams.ptype = ''
+        }
+      })
     },
     //查询
     handleQuery() {
-      this.getListToGx()
+      this.$refs.dictTable.clearSelection()
+      if (this.queryParams.ptype == '') {
+        return
+      }
+      getDictList({
+        dictLabel: this.queryParams.ptype
+      }).then(res => {
+        const dictList = res.data
+        this.dictList.forEach(row => {
+          dictList.forEach(item => {
+            if (row.businessId === item.businessId) {
+              this.$refs.dictTable.toggleRowSelection(row, true)
             }
+          })
+        })
+      })
     },
-   handleSelectionChange(val) {
-    this.multipleSelection = val
+
+    handleDictSelectionChange(val) {
+      this.dictSelection = val
+    }
   }
 }
 </script>
@@ -143,4 +171,15 @@ export default {
   height: 12em;
   width: 4px;
 }
+.info {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .title {
+    color: #333;
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
 </style>