新购编码绑定

README.md

@@ -13,6 +13,7 @@ npm install
 # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npmmirror.com
 
+
 # 启动服务
 npm run dev
 ```

src/api/purchase/binding.js

@@ -15,6 +15,10 @@ export const queryPurchaseBindDetailsApi = (data) => {
     params: data
   })
 }
+/** 编码绑定提交 */
+export const submitCodeBindApi = (data) => {
+  return request.post('/task/purchase/bind/addBind', data)
+}
 
 
 

src/views/purchase/binding/components/form-binding.vue

@@ -1,152 +1,270 @@
 <template>
     <!-- 往来单位 新增、编辑 表单组件 -->
     <div>
-        <el-form
+        <el-form ref="formBindCodeRef" :model="bindForm" :rules="bindCodeRules" :inline="true">
-            label-width="100px"
+            <el-form-item label="编码前缀" prop="exCode">
-            size="medium"
+                <el-input v-model="bindForm.exCode" />
-            ref="contactUnitsParamsRef"
-            :model="storageConfigParams"
-            :rules="storageConfigParamsRules"
-        >
-            <el-form-item label="仓库名称" prop="houseId">
-                <el-select v-model="storageConfigParams.houseId">
-                  <el-option
-                    v-for="item in storageConfigRange"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
             </el-form-item>
-            <el-form-item label="物资名称" prop="typeId">
+
-              <treeselect
+            <el-form-item label="后缀范围" prop="suffixOneCode">
-                v-model="storageConfigParams.typeId"
+                <el-input v-model="bindForm.suffixOneCode" maxlength="99999999" />
-                :options="typeRange"
+            </el-form-item>
-                noChildrenText="没有数据了"
+
-                noOptionsText="没有数据"
+            <el-form-item prop="suffixTwoCode">
-                noResultsText="没有搜索结果"
+                <el-input v-model="bindForm.suffixTwoCode" maxlength="99999999" />
-                placeholder="请选择所属上级"
+            </el-form-item>
-              />
+
+            <el-form-item label="本次检验时间">
+                <el-date-picker
+                    v-model="bindForm.thisCheckTime"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                ></el-date-picker>
             </el-form-item>
             <el-form-item>
-                <el-button type="success" @click="onSubmit">确定</el-button>
+                <el-button type="primary" plain @click="fillingCodeList">填充</el-button>
-                <el-button
+                <el-button type="danger" plain @click="onSubmit">编码提交</el-button>
-                    @click="
-                        () => {
-                            this.$emit('closeDialog')
-                        }
-                    "
-                    >取消</el-button
-                >
             </el-form-item>
         </el-form>
+
+        <!-- <el-row class="surplus-code">
+                剩余待编码数量：<span style="color: red">{{
+                    surplusNoBindNum
+                }}</span>
+        </el-row>-->
+        <el-table :data="codeList" height="600" border>
+            <el-table-column label="序号" align="center" type="index" />
+            <el-table-column label="物资名称" align="center" prop="materialName" show-overflow-tooltip />
+            <el-table-column
+                label="规格型号"
+                align="center"
+                prop="specificationCode"
+                show-overflow-tooltip
+            />
+            <el-table-column label="物资编号" align="center" prop="maCode" show-overflow-tooltip>
+                <template slot-scope="{row}">
+                    <el-input
+                        :ref="`inputRef-${row.id}`"
+                        v-model="row.maCode"
+                        οninput="value=value.replace(/[^0-9.]/g,'')"
+                        maxlength="24"
+                    ></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="出厂编号" align="center">
+                <template slot-scope="{row}">
+                    <el-input v-model="row.productionCode" maxlength="50"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="本次检验时间" align="center" prop="assetsCode">
+                <template slot-scope="{row}">
+                    <el-date-picker
+                        v-model="row.thisCheckTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                align="center"
+                width="160"
+                class-name="small-padding fixed-width"
+            >
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="delCode(scope.$index)"
+                        v-if="scope.$index !== 0"
+                    >删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- <div slot="footer" class="dialog-footer" style="text-align: center">
+                <el-button
+                    type="primary"
+                    @click="submitForm"
+                    v-if="!isDetail"
+                    :loading="codingLoading"
+                    >确 定</el-button
+                >
+                <el-button @click="cancel">取 消</el-button>
+        </div>-->
     </div>
 </template>
 
 <script>
-import {
+import { submitCodeBindApi } from '@/api/purchase/binding'
-  addStorageConfigListApi,
-  updateStorageConfigListApi
-} from '@/api/material/storageConfig'
-import {
-  queryStorageListApi
-} from '@/api/material/storage'
-import {
-  queryMaTypeTreeListApi
-} from '@/api/material/type'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 export default {
     name: 'FormStorage',
     props: {
-        editParams: {
+        rowData: {
             type: Object,
             default: () => null,
         },
     },
-    components: { Treeselect },
     created() {
-      this.getHouseRange()
+        console.log(this.rowData, 'this.rowData')
-      this.getTypeRange()
+
-    },
+        const {
-    mounted() {
+            materialName,
-        if (this.editParams) {
+            specificationCode,
-            Object.assign(this.storageConfigParams, this.editParams)
+            id,
-            this.subSort = 2
+            detailId,
-        } else {
+            typeId,
-            this.subSort = 1
+        } = this.rowData
+        this.initRowData = {
+            materialName,
+            specificationCode,
+            id,
+            detailId,
+            typeId,
+            maCode: '',
+            productionCode: '',
+            thisCheckTime: '',
         }
+        this.codeList.push(this.initRowData)
     },
+    mounted() {},
     data() {
         return {
-            subSort: '', // 提交类型：新增 1 / 修改 2
+            // 表单数据源
-            storageConfigParams: {
+            bindForm: {
-                houseId: undefined, // 仓库名称
+                exCode: '',
-                typeId: undefined, // 物资名称
+                suffixOneCode: '',
+                suffixTwoCode: '',
+                thisCheckTime: '',
             },
-            // 仓库下拉选项
+            initRowData: {},
-            storageConfigRange: [],
-            // 类型下拉选项
-            typeRange: [],
             // 校验规则
-            storageConfigParamsRules: {
+            bindCodeRules: {
-                houseId: [
+                exCode: [
+                    { required: true, message: '请输入', trigger: 'blur' },
+                ],
+                suffixOneCode: [
+                    { required: true, message: '请输入', trigger: 'blur' },
                     {
-                        required: true,
+                        pattern: /^[1-9][0-9]*$/,
-                        message: '请输入仓库名称',
+                        message: '请输入大于0且不能以0开头的正整数',
-                        trigger: 'blur',
                     },
                 ],
-                typeId: [
+                suffixTwoCode: [
+                    { required: true, message: '请输入', trigger: 'blur' },
                     {
-                        required: true,
+                        pattern: /^[1-9][0-9]*$/,
-                        message: '请选择物资名称',
+                        message: '请输入大于0且不能以0开头的正整数',
-                        trigger: 'blur',
                     },
                 ],
             },
+            // 列表数据源
+            codeList: [],
         }
     },
     methods: {
-        /** 初始化获取仓库下拉 */
+        /** 填充按钮 */
-        getHouseRange() {
+        fillingCodeList() {
-          queryStorageListApi().then(res => {
+            // 1. 先校验后缀范围等是否输入
-            console.log(res)
+            this.$refs['formBindCodeRef'].validate(valid => {
-            this.storageConfigRange = res.rows.map(item => {
+                if (valid) {
-              return {
+                    console.log('校验通过--')
-                value: item.id,
+                    // 2. 判断后缀范围第二个值是否大于第一个值
-                label: item.name,
+                    if (
+                        parseInt(this.bindForm.suffixTwoCode) <
+                        parseInt(this.bindForm.suffixOneCode)
+                    ) {
+                        this.$message.error(
+                            '后缀范围第二个值不能小于第一个值！',
+                        )
+                        return
+                    }
+
+                    // 3. 通过后走编码逻辑
+                    this.codeList = []
+                    this.codeList.push(this.initRowData)
+
+                    let suffixOneCode = parseInt(this.bindForm.suffixOneCode)
+                    let suffixTwoCode = parseInt(this.bindForm.suffixTwoCode)
+                    let sumNum = suffixTwoCode - suffixOneCode + 1
+
+                    for (let i = 0; i < sumNum; i++) {
+                        if (i === 0) {
+                            this.codeList[0].maCode = suffixOneCode
+                            this.codeList[0].thisCheckTime = this.bindForm.thisCheckTime
+                            
+                            continue
+                        }
+                        let obj = {
+                            materialName: this.initRowData.materialName,
+                            specificationCode: this.initRowData.specificationCode,
+                            id: this.initRowData.id,
+                            detailId: this.initRowData.detailId,
+                            typeId: this.initRowData.typeId,
+                            maCode: suffixOneCode + i,
+                            thisCheckTime: this.bindForm.thisCheckTime,
+                        }
+                        this.codeList.push(obj)
+                    }
+
+                    console.log(this.codeList, '处理后的数据')
+
+                    this.codeList.forEach(e => {
+                        e.maCode =
+                            this.bindForm.exCode + this.intiCode(e.maCode)
+                    })
                 }
             })
-          }).catch(err => {})
         },
-        /** 初始化获取类型下拉 */
+        /** 处理编码 */
-        getTypeRange() {
+        intiCode(code) {
-          queryMaTypeTreeListApi().then(res => {
+            if (code < 10) {
-            this.typeRange = res.data
+                return `000${code}`
-          }).catch(err => {})
+            } else if (code < 100) {
+                return `00${code}`
+            } else if (code < 1000) {
+                return `0${code}`
+            } else {
+                return code
+            }
+        },
+        /** 编码列表删除 */
+        delCode(index) {
+            console.log(index, '索引')
+            this.codeList.splice(index, 1)
         },
         /** 确认按钮 */
-        onSubmit() {
+        async onSubmit() {
-            this.$refs.contactUnitsParamsRef.validate((valid) => {
+            let isCode = false
-                if (valid) {
+            try {
-                    console.log('校验通过', this.storageConfigParams, this.subSort)
+                this.codeList.forEach((e, index) => {
-                    // 1. 表单校验通过后调后台 Api
+                    if (!e.maCode) {
-                    if(this.subSort === 1) {
+                        this.$message.error(
-                      addStorageConfigListApi(this.storageConfigParams).then(res => {
+                            `序号${index + 1}的物资未编码，请输入编码`,
-                        console.log(res)
+                        )
-                        this.$modal.msgSuccess('新增成功')
+                        isCode = true
-                      }).catch(err => {})
+                        throw new Error()
-                    } else if(this.subSort === 2) {
-                      updateStorageConfigListApi(this.storageConfigParams).then(res => {
-                        console.log(res)
-                        this.$modal.msgSuccess('修改成功')
-                      }).catch(err => {})
-                    }
-                    // 2. 成功之后通知父组件关闭弹框
-                    this.$emit('closeDialog', true)
                     }
                 })
+            } catch (error) {}
+
+            if (isCode) return
+            //  1. 掉后台接口
+            console.log(this.codeList, 'this.codeList')
+
+            const params = {
+                dtoList: this.codeList,
+            }
+            const res = await submitCodeBindApi(params)
+            console.log(res, 'res')
+            if (res.code === 200) {
+                this.$message.success(`编码绑定成功！`)
+
+                //this.$emit('closeDialog', true)
+            } else {
+                this.$message.error(`${res.msg}`)
+            }
         },
     },
 }
@@ -156,7 +274,7 @@ export default {
 ::v-deep .el-select {
     width: 100%;
 }
-::v-deep .el-form-item__label{
+::v-deep .el-form-item__label {
     font-weight: normal;
 }
 </style>

src/views/purchase/binding/components/list-binding.vue

@@ -1,11 +1,7 @@
 <template>
     <!-- 新购绑定页面 -->
     <div class="app-container">
-        <PageHeader
+        <PageHeader v-if="isShowComponent !== 'Index'" :pageContent="pageContent" @goBack="goBack" />
-          v-if="isShowComponent !== 'Index'"
-          :pageContent="pageContent"
-          @goBack="goBack"
-        />
         <!-- 列表 -->
         <TableModel
             :formLabel="formLabel"
@@ -15,30 +11,24 @@
             ref="tableRef"
             v-if="isShowComponent === 'Index'"
         >
-
-
             <template slot="handle" slot-scope="{ data }">
-           <el-button
+                <el-button type="primary" size="mini" @click="handleBindOpt(data)">绑定</el-button>
-               type="primary"
-               size="mini"
-               @click="handleEditData(data)"
-            >绑定</el-button>
             </template>
 
-           <template slot="purchaseNum" slot-scope="{ data }">
+            <template slot="purchaseNum" slot-scope="{ data }">{{ data.purchaseNum / 1000 }}</template>
-                     {{ data.purchaseNum / 1000 }}
-           </template>
 
-          <template slot="checkNum" slot-scope="{ data }">
+            <template slot="checkNum" slot-scope="{ data }">{{data.checkNum / 1000}}</template>
-                    {{data.checkNum / 1000}}
-          </template>
-
-           <template slot="bindNum" slot-scope="{ data }">
-                    {{data.bindNum / 1000}}
-           </template>
 
+            <template slot="bindNum" slot-scope="{ data }">{{data.bindNum / 1000}}</template>
         </TableModel>
 
+        <!-- 数据绑定弹框 -->
+        <DialogModel :dialogConfig="dialogConfig" @closeDialogOuter="closeDialogOuter">
+            <template slot="outerContent">
+                <!-- 编码绑定组件 -->
+                <FormBinding :rowData="rowData" @closeDialog="closeDialog" />
+            </template>
+        </DialogModel>
     </div>
 </template>
 
@@ -47,29 +37,34 @@ import PageHeader from '@/components/pageHeader'
 import { columnsList, dialogConfig, formLabel } from '../config-bind-list'
 import { commonMixin } from '../../mixins/common'
 
-import {
+import { queryPurchaseBindDetailsApi } from '@/api/purchase/binding' // api
-  queryPurchaseBindDetailsApi
+import FormBinding from './form-binding.vue'
-} from '@/api/purchase/binding'
 
 export default {
     name: 'arrivalBindingManage',
     mixins: [commonMixin], // 混入公共方法和数据
-    components: {  PageHeader },
+    components: { PageHeader, FormBinding },
-    props:{
+    props: {
         sendParams: {
             type: Object,
             default: () => null,
-      }
+        },
     },
     created() {
-      console.log(this.sendParams,'this.sendParams')
+        console.log(this.sendParams, 'this.sendParams')
     },
     methods: {
         queryPurchaseBindDetailsApi,
         goBack() {
             this.isShowComponent = 'Index'
-      }
+        },
-
+        /**  绑定按钮 */
+        handleBindOpt(data) {
+            console.log('data', data)
+            this.rowData = data
+            this.dialogConfig.outerVisible = true
+            this.dialogConfig.outerTitle = '绑定'
+        },
     },
     data() {
         return {
@@ -78,7 +73,8 @@ export default {
             dialogConfig,
             isShowComponent: 'Index',
             pageContent: '新购绑定物资列表',
-            sendData: undefined
+            sendData: undefined,
+            rowData: null, // 绑定的当前行数据
         }
     },
 }

src/views/purchase/binding/config.js

@@ -3,7 +3,7 @@ export const formLabel = [
   { f_label: '开始时间', f_model: 'startTime', f_type: 'date' },
   { f_label: '结束时间', f_model: 'endTime', f_type: 'date' },
   { f_label: '关键字', f_model: 'keyWord', f_type: 'ipt' },
-  { f_label: '状态', f_model: 'keyWord', f_type: 'ipt' },
+
 ]
 export const columnsList = [
   { t_props: 'arrivalTime', t_label: '到货时间', },

src/views/purchase/binding/index.vue

@@ -49,7 +49,6 @@
           v-if="isShowComponent === 'list-binding'"
           :sendParams='sendParams'
         >
-
         </list-binding>
 
     </div>

vue.config.js

@@ -36,8 +36,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://192.168.2.13:18080`,  // 代理的后台ip 端口 解决请求跨域
-        //   target: `http://192.168.0.234:18080`,  // 阮
+          target: `http://localhost:18080`,  // 阮
-        target: `http://192.168.2.21:18080`,  // 马
+        // target: `http://192.168.2.21:18080`,  // 马
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''