添加营销系统模块

src/views/TechnologyCenter/CreatePackingList/index.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <span>项目名称</span>
+      <el-select v-model="projectValue" placeholder="请选择项目名称" filterable size="small">
+        <el-option
+          v-for="item in project"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"/>
+      </el-select>
+      <el-button :disabled="disabled" type="success" size="small" icon="el-icon-circle-plus-outline" @click="addReceipt">增加</el-button>
+      <el-button type="warning" size="small" icon="el-icon-download">导出</el-button>
+      <div class="title">总装箱单</div>
+      <el-table
+        v-loading="loading"
+        :data="receiptData"
+        highlight-current-row
+        border
+        style="margin-top:20px">
+        <el-table-column
+          label="装箱单号"
+          align="center"
+          min-width="150px">
+          <template slot-scope="scope">{{ scope.row.装箱单号 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="发货节点"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.发货节点 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="名称"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.名称 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="收货单位"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.收货单位 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="联系人"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.联系人 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="联系方式"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.联系方式 }}</template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-edit"
+              @click="handleEditReceipt(scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="handleDeleteReceipt(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card style="margin-top: 10px">
+      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-search" @click="addMachine">添加主机</el-button>
+      <div class="title">主机</div>
+      <el-table
+        v-loading="loading"
+        :data="machineTableData"
+        highlight-current-row
+        border
+        style="margin-top:20px">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-table
+              :data="props.row.groupData"
+              border
+              style="width: 90%">
+              <el-table-column
+                fixed
+                align="center"
+                prop="类别"
+                label="类别"
+              />
+              <el-table-column
+                label="序号"
+                type="index"
+                align="center"
+                width="100px"/>
+              <el-table-column
+                align="center"
+                prop="代号"
+                label="代号"
+              />
+              <el-table-column
+                align="center"
+                prop="部件名称"
+                label="名称"
+              />
+              <el-table-column
+                align="center"
+                prop="address"
+                label="规格"
+              />
+              <el-table-column
+                align="center"
+                prop="部件数量"
+                label="数量"
+              />
+              <el-table-column
+                align="center"
+                prop="备注"
+                label="备注"
+              />
+            </el-table>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="序号"
+          type="index"
+          align="center"
+          width="100px"/>
+        <el-table-column
+          label="代号"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.代号 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="机床名称"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.机床名称 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="数量"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.数量 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="备注"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.备注 }}</template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-edit"
+              @click="editMachine(scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteMachine(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card style="margin-top: 10px">
+      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-search" @click="addSpare">添加备件</el-button>
+      <div class="title">随机供应的备件</div>
+      <el-table
+        v-loading="loading"
+        :data="spareData"
+        highlight-current-row
+        border
+        style="margin-top:20px">
+        <el-table-column
+          label="序号"
+          type="index"
+          align="center"
+          min-width="150px"/>
+        <el-table-column
+          label="名称"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.名称 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="规格"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.规格 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="数量"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.数量 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="单位"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.单位 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="备注"
+          align="center">
+          <template slot-scope="scope">{{ scope.row.备注 }}</template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-edit"
+              @click="editSpare(scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteSpare(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card style="margin-top: 10px">
+      <el-button :disabled="!disabled" type="primary" size="small" icon="el-icon-search" @click="addFile">添加文件</el-button>
+      <div class="title">随机技术文件</div>
+      <el-table
+        v-loading="fileLoading"
+        :data="fileData"
+        highlight-current-row
+        border
+        style="margin-top:20px">
+        <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+          min-width="150px"/>
+        <el-table-column
+          label="名称"
+          align="center"
+          min-width="200px">
+          <template slot-scope="scope">{{ scope.row.名称 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="数量"
+          align="center"
+          min-width="100px">
+          <template slot-scope="scope">{{ scope.row.数量 }}</template>
+        </el-table-column>
+        <el-table-column
+          label="备注"
+          align="center"
+          min-width="500px">
+          <template slot-scope="scope">{{ scope.row.备注 }}</template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-edit"
+              @click="editFile(scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="deleteFile(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog :title="receiptTitle" :visible.sync="receiptVisible" center style="min-height: 200px" width="800px">
+      <el-form ref="receiptForm" :rules="rules" :model="receiptForm" label-position="left" label-width="110px" class="demo-ruleForm">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="装箱单号" prop="装箱单号">
+              <el-input v-model="receiptForm.装箱单号" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="名称">
+              <el-input v-model="receiptForm.名称" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="发货节点" prop="发货节点">
+              <el-date-picker
+                v-model="receiptForm.发货节点"
+                value-format="yyyy-MM-dd"
+                size="small"
+                type="date"
+                placeholder="请选择发货节点"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="收货单位" prop="收货单位">
+              <el-input v-model="receiptForm.收货单位" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系人" prop="联系人">
+              <el-input v-model="receiptForm.联系人" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系方式" prop="联系方式">
+              <el-input v-model="receiptForm.联系方式" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button v-if="receiptTitle === '新增总装箱单'" type="primary" @click="submitAddReceipt">确定</el-button>
+        <el-button v-else-if="receiptTitle === '编辑总装箱单'" type="primary" @click="submitEditReceipt">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="machineVisible" :title="machineTitle" center style="min-height: 200px" width="400px">
+      <el-form ref="machineForm" :rules="rules" :model="machineForm" label-position="left" label-width="110px" class="demo-ruleForm">
+        <el-row>
+          <el-col v-if="machineTitle==='添加主机'" :span="24">
+            <el-form-item label="机床号" prop="装箱单号">
+              <el-select v-model="machineValue" placeholder="请选择机床图号" filterable size="small">
+                <el-option
+                  v-for="item in machine"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="数量" prop="数量">
+              <el-input v-model="machineForm.数量" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="名称">
+              <el-input v-model="machineForm.备注" type="textarea" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button v-if="machineTitle==='添加主机'" type="primary" @click="submitAddMachine">确定</el-button>
+        <el-button v-else-if="machineTitle==='编辑主机'" type="primary" @click="submitEditMachine">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="fileVisible" :title="fileTitle" center style="min-height: 200px" width="400px">
+      <el-form ref="machineForm" :rules="rules" :model="fileForm" label-position="left" label-width="110px" class="demo-ruleForm">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="名称" prop="名称">
+              <el-input v-model="fileForm.名称" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="数量" prop="数量">
+              <el-input v-model="fileForm.数量" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="备注">
+              <el-input v-model="fileForm.备注" type="textarea" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button v-if="fileTitle==='添加文件'" type="primary" @click="submitAddFile">确定</el-button>
+        <el-button v-else-if="fileTitle==='编辑文件'" type="primary" @click="submitEditFile">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="spareVisible" :title="spareTitle" center style="min-height: 200px" width="400px">
+      <el-form ref="machineForm" :rules="rules" :model="spareForm" label-position="left" label-width="110px" class="demo-ruleForm">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="名称" prop="名称">
+              <el-input v-model="spareForm.名称" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="规格" prop="规格">
+              <el-input v-model="spareForm.规格" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="数量" prop="数量">
+              <el-input v-model="spareForm.数量" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="单位" prop="单位">
+              <el-input v-model="spareForm.单位" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="备注">
+              <el-input v-model="spareForm.备注" type="textarea" size="small" style="width:200px"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button v-if="spareTitle==='添加备件'" type="primary" @click="submitAddSpare">确定</el-button>
+        <el-button v-else-if="spareTitle==='编辑备件'" type="primary" @click="submitEditSpare">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { projectSelect, getReciptData, insertReciptData, updateReciptData, deleteReciptData, getMachineData, getGroupData, machineSelect, addMachineData, updateMachineData, deleteMachineData, getFileData, addFileData, editFileData, deleteFileData, getSpareData, addSpareData, editSpareData, deleteSpareData } from '@/api/TechnologyCenter/CreatePackingList'
+export default {
+  data() {
+    return {
+      project: [],
+      projectValue: '',
+      machine: [],
+      machineValue: '',
+      receiptData: [],
+      loading: false,
+      fileData: [],
+      fileLoading: false,
+      receiptTitle: '',
+      receiptVisible: false,
+      machineTitle: '',
+      machineVisible: false,
+      spareVisible: false,
+      spareTitle: '',
+      spareForm: {
+        序号: '',
+        名称: '',
+        规格: '',
+        单位: '',
+        备注: '',
+        数量: ''
+      },
+      spareData: [],
+      receiptForm: {
+        装箱单号: '',
+        发货节点: '',
+        名称: '',
+        收货单位: '',
+        联系人: '',
+        联系方式: ''
+      },
+      machineForm: {
+        序号: '',
+        机床号: '',
+        备注: '',
+        数量: ''
+      },
+      rules: {
+      },
+      machineTableData: [],
+      receiptName: '',
+      receiptNum: 0, // 装箱单号，全局要使用
+      fileVisible: false,
+      fileTitle: '',
+      fileForm: {
+        序号: '',
+        名称: '',
+        数量: '',
+        备注: ''
+      }
+    }
+  },
+  computed: {
+    disabled() {
+      return this.receiptData.length > 0
+    },
+    projectName() {
+      for (let i = 0; i < this.project.length; i++) {
+        if (this.project[i].value === this.projectValue) {
+          return this.project[i].label
+        }
+      }
+    }
+  },
+  watch: {
+    project(val) {
+      if (val.length > 0) {
+        this.projectValue = val[0].value
+      }
+    },
+    projectValue(val) {
+      if (val) {
+        this.getMachineSelect(val)
+      }
+      this.getReceipt()
+    },
+    receiptNum(val) {
+      if (val !== 0) {
+        this.getMachineData()
+        this.getFileData()
+        this.getSpareData()
+      }
+    },
+    machine(val) {
+      if (val.length > 0) {
+        this.machineValue = val[0].value
+      }
+    }
+  },
+  mounted() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.getSelect(projectSelect, ['项目名称', '项目流水号'], 'project')
+    },
+    getMachineSelect(val) {
+      this.getSelect(machineSelect, ['机床图号', '机床流水号'], 'machine', val)
+    },
+    async getReceipt() {
+      this.receiptData = []
+      this.machineTableData = []
+      const response = await getReciptData(this.projectValue)
+      const data = response.data
+      if (data.length > 0) {
+        this.receiptNum = data[0].装箱单编号
+        this.receiptName = data[0].装箱单号
+        this.receiptData = data
+      } else {
+        this.receiptNum = 0
+        this.receiptName = ''
+      }
+    },
+    addReceipt() {
+      this.addForm('receiptForm')
+      this.receiptVisible = true
+      this.receiptTitle = `新增总装箱单`
+    },
+    submitAddReceipt() {
+      this.addTable(insertReciptData, [this.receiptForm.装箱单号, this.receiptForm.发货节点, this.receiptForm.名称, this.receiptForm.收货单位, this.receiptForm.联系方式, this.receiptForm.联系人, this.projectValue], 'receiptForm', function() {
+        this.receiptVisible = false
+        this.getReceipt()
+      })
+    },
+    handleEditReceipt(row) {
+      this.editForm(row, 'receiptForm', function() {
+        this.receiptVisible = true
+        this.receiptTitle = `编辑总装箱单`
+      })
+    },
+    submitEditReceipt() {
+      this.editTable(updateReciptData, [this.receiptForm.装箱单号, this.receiptForm.发货节点, this.receiptForm.名称, this.receiptForm.收货单位, this.receiptForm.联系方式, this.receiptForm.联系人, this.receiptNum], 'receiptForm', function() {
+        this.receiptVisible = false
+        this.getReceipt()
+      })
+    },
+    handleDeleteReceipt(row) {
+      this.deleteRow(deleteReciptData, row.装箱单编号, function() {
+        this.receiptNum = 0
+        this.receiptName = ''
+        this.getReceipt()
+      })
+    },
+    cancel() {
+      this.receiptVisible = false
+      this.machineVisible = false
+    },
+    async getMachineData() {
+      const response = await getMachineData(this.receiptNum)
+      const data = response.data
+      for (let i = 0; i < data.length; i++) {
+        const resp = await getGroupData(this.projectName, data[i].代号)
+        const groupData = resp.data.map(item => {
+          item.类别 = '机床所属部件'
+          item.代号 = data[i].代号 + '-' + item.组号.split('-')[0]
+          return item
+        })
+        this.machineTableData.push({
+          序号: data[i].序号,
+          代号: data[i].代号,
+          机床名称: data[i].名称,
+          数量: data[i].数量,
+          备注: data[i].备注,
+          groupData: groupData
+        })
+      }
+    },
+    addMachine() {
+      this.addForm('machineForm', function() {
+        this.machineTitle = `添加主机`
+        this.machineVisible = true
+      })
+    },
+    async submitAddMachine() {
+      const response = await addMachineData(this.projectName, this.machineValue, this.machineForm.备注, this.machineForm.数量, this.receiptNum)
+      if (response.data[0].result === '1') {
+        this.machineVisible = false
+        this.getMachineData()
+      }
+    },
+    editMachine(row) {
+      this.editForm(row, 'machineForm', function() {
+        this.machineTitle = `编辑主机`
+        this.machineVisible = true
+      })
+    },
+    async submitEditMachine() {
+      const response = await updateMachineData(this.machineForm.序号, this.machineForm.数量, this.machineForm.备注)
+      if (response.data[0].result === '1') {
+        this.machineVisible = false
+        this.getMachineData()
+      }
+    },
+    deleteMachine(row) {
+      this.deleteRow(deleteMachineData, row.序号, function() {
+        this.getMachineData()
+      })
+    },
+    async getFileData() {
+      const response = await getFileData(this.receiptNum)
+      this.fileData = response.data
+      console.log(this.fileData)
+    },
+    addFile() {
+      this.addForm('machineForm', function() {
+        this.fileTitle = `添加文件`
+        this.fileVisible = true
+      })
+    },
+    async submitAddFile() {
+      const response = await addFileData(this.fileForm.名称, this.fileForm.数量, this.fileForm.备注, this.receiptNum)
+      if (response.data[0].result === '1') {
+        this.fileVisible = false
+        this.getFileData()
+      }
+    },
+    editFile(row) {
+      this.editForm(row, 'fileForm', function() {
+        this.fileTitle = `编辑文件`
+        this.fileVisible = true
+      })
+    },
+    async submitEditFile() {
+      const response = await editFileData(this.fileForm.名称, this.fileForm.数量, this.fileForm.备注, this.fileForm.序号)
+      if (response.data[0].result === '1') {
+        this.fileVisible = false
+        this.getFileData()
+      }
+    },
+    deleteFile(row) {
+      this.deleteRow(deleteFileData, row.序号, function() {
+        this.getFileData()
+      })
+    },
+    async getSpareData() {
+      const response = await getSpareData(this.receiptNum)
+      this.spareData = response.data
+    },
+    addSpare() {
+      this.addForm('spareForm', function() {
+        this.spareTitle = `添加备件`
+        this.spareVisible = true
+      })
+    },
+    async submitAddSpare() {
+      const response = await addSpareData(this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.receiptNum)
+      if (response.data[0].result === '1') {
+        this.spareVisible = false
+        this.getSpareData()
+      }
+    },
+    editSpare(row) {
+      this.editForm(row, 'spareForm', function() {
+        this.spareTitle = `编辑备件`
+        this.spareVisible = true
+      })
+    },
+    async submitEditSpare() {
+      const response = await editSpareData(this.spareForm.名称, this.spareForm.规格, this.spareForm.单位, this.spareForm.数量, this.spareForm.备注, this.fileForm.序号)
+      if (response.data[0].result === '1') {
+        this.spareVisible = false
+        this.getSpareData()
+      }
+    },
+    deleteSpare(row) {
+      this.deleteRow(deleteSpareData, row.序号, function() {
+        this.getSpareData()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  margin: 20px;
+}
+.title{
+  float: right;
+  font-size: 20px;
+  padding: 10px;
+  font-weight: bolder;
+}
+</style>