ncs_project/manager-admin/src/views/pjOrder/OrderItems.vue

<template>
  <div class="container">
    <el-alert type="warning"
              :title="type+'项目条目'"
              :closable="false" show-icon style="margin-bottom: 15px"></el-alert>

    <el-tabs>
      <el-tab-pane label="图表">
        <el-divider>标准配置</el-divider>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="12" v-for="(item, index) in baseDevice" :key="item.id">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">{{ item.name }}</el-link>
                <el-button v-if="boolFounder" size="mini" @click="changeEdit(item)">修改</el-button>
              </div>
              <div>
                <div class="param-item">
                  <div class="image">
                    <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">
                      <img :src="item.image">
                    </el-link>
                  </div>
                  <div class="info">
                    <div>生产型号：{{ item.code }}</div>
                    <div>产品编码：{{ item.no }}</div>
                    <div>生产周期：{{ item.produce_day }}天</div>
                    <div>数量：{{item.qty}}</div>
                    <div>价格：{{item.price}}</div>
                  </div>
                </div>
                <div class="myFont">{{ item.sales_remark }}</div>
                <el-row>
                  <el-col :span="12">
                    <template v-if="boolFounder || permissions.filter(p => p === 'pjTech' || p === 'pjOrderItemsList').length > 0">
                      <el-divider>技术：
                        <el-button type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
                      </el-divider>
                      <div class="tech_panel">
                        <div class="myFont">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
                            <span style="font-size: 11px">{{item.tech_name}}</span>
                          </el-tooltip>
                        </div>
                        <div class="myFont">填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
                            <span style="font-size: 11px">{{ item.tech_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
                        <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
                        <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.tech_remark"></el-input></div>
                      </div>
                    </template>
                    <template v-else>
                      <el-divider>技术：</el-divider>
                      <div class="tech_panel myFont">
                        <div class="">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
                            <span style="font-size: 11px">{{item.tech_name}}</span>
                          </el-tooltip>
                        </div>
                        <div>填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
                            <span style="font-size: 11px">{{ item.tech_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>硬件版本：<el-tooltip class="item" effect="dark" :content="item.hard_ver" placement="top">
                          <span style="font-size: 11px">{{item.hard_ver}}</span>
                        </el-tooltip>
                        </div>
                        <div>软件版本：<el-tooltip class="item" effect="dark" :content="item.soft_ver" placement="top">
                          <span style="font-size: 11px">{{item.soft_ver}}</span>
                        </el-tooltip></div>
                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.tech_remark" placement="top">
                          <span style="font-size: 11px">{{item.tech_remark}}</span>
                        </el-tooltip></div>
                      </div>
                    </template>
                  </el-col>
                  <el-col :span="12">
                    <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
                      <el-divider>生产：
                        <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
                      </el-divider>
                      <div class="tech_panel">
                        <div class="myFont">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
                            <span style="font-size: 11px">{{item.produce_name}}</span>
                          </el-tooltip>
                        </div>
                        <div class="myFont">填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
                            <span style="font-size: 11px">{{ item.produce_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>已产量：<el-input v-model="item.produced_qty"><template slot="append">共{{item.qty}}</template></el-input></div>
                        <div>发货量：<el-input v-model="item.shipped_qty" /></div>
                        <div>备注：
                          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.produced_remark"></el-input>
                        </div>
                        <div>生产状态：
                          <el-select placeholder="请选择" slot="prepend" v-model="item.produce_status">
                            <el-option value="采购原料中"></el-option>
                            <el-option value="生产中"></el-option>
                            <el-option value="完成"></el-option>
                          </el-select>
                        </div>
                        <div @click="clickImg(index)">
                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1">
                            <el-button v-if="!item.produce_img" size="small" type="primary">点击上传</el-button>
                          </el-upload>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <el-divider>生产情况</el-divider>
                      <div class="tech_panel myFont">
                        <div>填写人：
                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
                            <span style="font-size: 11px">{{item.produce_name}}</span>
                          </el-tooltip>
                        </div>
                        <div>填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
                            <span style="font-size: 11px">{{ item.produce_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>已产量：<el-tooltip class="item" effect="dark" :content="item.produced_qty" placement="top">
                          <span style="font-size: 11px">{{ item.produced_qty }}</span>
                        </el-tooltip>件</div>
                        <div>发货量：<el-tooltip class="item" effect="dark" :content="item.shipped_qty" placement="top">
                          <span style="font-size: 11px">{{ item.shipped_qty }}</span>
                        </el-tooltip>件</div>
                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.produced_remark" placement="top">
                          <span style="font-size: 11px">{{ item.produced_remark }}</span>
                        </el-tooltip></div>
                        <div>生产状态：<span style="font-size: 11px">{{ item.produce_status }}</span></div>
                        <div @click="clickImg(index)">
                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" disabled :limit="1">
                          </el-upload>
                        </div>
                      </div>
                    </template>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider>其它选配</el-divider>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="12" v-for="item in addonDevice" :key="item.id">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">{{ item.name }}</el-link>
                <el-button v-if="boolFounder" size="mini" @click="changeEdit(item)">修改</el-button>
              </div>
              <div>
                <div class="param-item">
                  <div class="image">
                    <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">
                      <img :src="item.image">
                    </el-link>
                  </div>
                  <div class="info">
                    <div>生产型号：{{ item.code }}</div>
                    <div>产品编码：{{ item.no }}</div>
                    <div>生产周期：{{ item.produce_day }}天</div>
                    <div>数量：{{item.qty}}</div>
                    <div>价格：{{item.price}}</div>
                  </div>
                </div>
                <div class="myFont">{{ item.sales_remark }}</div>
                <el-row>
                  <el-col :span="12">
                    <template v-if="boolFounder || permissions.filter(p => p === 'pjTech' || p === 'pjOrderItemsList').length > 0">
                      <el-divider>技术：
                        <el-button type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
                      </el-divider>
                      <div class="tech_panel">
                        <div class="myFont">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
                            <span style="font-size: 11px">{{item.tech_name}}</span>
                          </el-tooltip>
                        </div>
                        <div class="myFont">填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
                            <span style="font-size: 11px">{{ item.tech_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
                        <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
                        <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.tech_remark"></el-input></div>
                      </div>
                    </template>
                    <template v-else>
                      <el-divider>技术：</el-divider>
                      <div class="tech_panel myFont">
                        <div class="">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
                            <span style="font-size: 11px">{{item.tech_name}}</span>
                          </el-tooltip>
                        </div>
                        <div>填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
                            <span style="font-size: 11px">{{ item.tech_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>硬件版本：<el-tooltip class="item" effect="dark" :content="item.hard_ver" placement="top">
                          <span style="font-size: 11px">{{item.hard_ver}}</span>
                        </el-tooltip>
                        </div>
                        <div>软件版本：<el-tooltip class="item" effect="dark" :content="item.soft_ver" placement="top">
                          <span style="font-size: 11px">{{item.soft_ver}}</span>
                        </el-tooltip></div>
                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.tech_remark" placement="top">
                          <span style="font-size: 11px">{{item.tech_remark}}</span>
                        </el-tooltip></div>
                      </div>
                    </template>
                  </el-col>
                  <el-col :span="12">
                    <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
                      <el-divider>生产：
                        <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
                      </el-divider>
                      <div class="tech_panel">
                        <div class="myFont">填写人：
                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
                            <span style="font-size: 11px">{{item.produce_name}}</span>
                          </el-tooltip>
                        </div>
                        <div class="myFont">填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
                            <span style="font-size: 11px">{{ item.produce_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>已产量：<el-input v-model="item.produced_qty"><template slot="append">共{{item.qty}}</template></el-input></div>
                        <div>发货量：<el-input v-model="item.shipped_qty" /></div>
                        <div>备注：
                          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.produced_remark"></el-input>
                        </div>
                        <div>生产状态：
                          <el-select placeholder="请选择" slot="prepend" v-model="item.produce_status">
                            <el-option value="采购原料中"></el-option>
                            <el-option value="生产中"></el-option>
                            <el-option value="完成"></el-option>
                          </el-select>
                        </div>
                        <div @click="clickImg(index)">
                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1">
                            <el-button v-if="!item.produce_img" size="small" type="primary">点击上传</el-button>
                          </el-upload>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <el-divider>生产情况</el-divider>
                      <div class="tech_panel myFont">
                        <div>填写人：
                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
                            <span style="font-size: 11px">{{item.produce_name}}</span>
                          </el-tooltip>
                        </div>
                        <div>填写时间：
                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
                            <span style="font-size: 11px">{{ item.produce_time }}</span>
                          </el-tooltip>
                        </div>
                        <div>已产量：<el-tooltip class="item" effect="dark" :content="item.produced_qty" placement="top">
                          <span style="font-size: 11px">{{ item.produced_qty }}</span>
                        </el-tooltip>件</div>
                        <div>发货量：<el-tooltip class="item" effect="dark" :content="item.shipped_qty" placement="top">
                          <span style="font-size: 11px">{{ item.shipped_qty }}</span>
                        </el-tooltip>件</div>
                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.produced_remark" placement="top">
                          <span style="font-size: 11px">{{ item.produced_remark }}</span>
                        </el-tooltip></div>
                        <div>生产状态：<span style="font-size: 11px">{{ item.produce_status }}</span></div>
                        <div @click="clickImg(index)">
                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" disabled :limit="1">
                          </el-upload>
                        </div>
                      </div>
                    </template>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="表格">
        <el-table :data="listData" stripe style="width: 100%;">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column label="基础件?">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type_base">标准件</el-tag>
              <el-tag type="info" v-else>配件</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="code" show-overflow-tooltip label="生产型号"></el-table-column>
          <el-table-column prop="no" show-overflow-tooltip label="生产编码"></el-table-column>
          <el-table-column prop="hard_ver" show-overflow-tooltip label="硬件版本"></el-table-column>
          <el-table-column prop="soft_ver" show-overflow-tooltip label="软件版本"></el-table-column>
          <el-table-column prop="qty" label="数量" width="100"></el-table-column>
          <el-table-column prop="produced_qty" label="已产数量" width="100"></el-table-column>
          <el-table-column prop="produced_qty" label="需产数量" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.qty - scope.row.produced_qty}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100"></el-table-column>
          <el-table-column prop="sales_remark" show-overflow-tooltip label="销售备注"></el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="outExcel">导出Excel</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogImage">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-drawer
      title="设备"
      :visible.sync="goodsSelectVisible"
      :append-to-body="true"
      size="80%"
    >
      <goods-select :type="type" :type_base="type_base" @selected="goodsSelect"></goods-select>
    </el-drawer>
  </div>
</template>

<script>
import * as API_orderItems from '@/api/pjOrderItems.js'
import { Foundation } from '~/ui-utils'
import Storage from '../../utils/storage'
import goodsSelect from '../goods/goodsSelect.vue'
import { editModel } from '../../api/pjOrderItems'

export default {
  name: 'pjOrderItems',
  components: { goodsSelect },
  props: {
    orderNo: {
      type: String,
      value: ''
    },
    type: {
      type: String,
      value: '服务器版'
    }
  },
  data() {
    return {
      boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
      permissions: [],
      keyId: '',
      params: {
        page_no: 1,
        page_size: 1000,
        sort: 'type_base',
        dir: 'desc'
      },
      listData: [],
      baseDevice: [],
      addonDevice: [],
      dialogImage: false,
      dialogImageUrl: '',
      changeId: null,
      index: 0,
      goodsSelectVisible: false,
      type_base: true
    }
  },
  mounted() {
    if (!this.boolFounder) {
      this.permissions = JSON.parse(Storage.getItem('permissions'))
    }
  },
  activated() {
  },
  watch: {
    orderNo(val) {
      if (val) {
        this.getData()
      }
    }
  },
  methods: {
    getData() {
      this.params.fixedCondition = 'order_no=' + this.orderNo
      API_orderItems.getList(this.params).then(res => {
        this.listData = res.data
        this.baseDevice = this.listData.filter(p => p.type_base)
        this.addonDevice = this.listData.filter(p => !p.type_base)
      })
    },
    handleTechSave(item) {
      const adminUser = JSON.parse(Storage.getItem('admin_user'))
      item.tech_user = adminUser.uid
      if (item.tech_name) {
        item.tech_name = item.tech_name + ',' + adminUser.realname
      } else {
        item.tech_name = adminUser.realname
      }
      if (item.tech_time) {
        item.tech_time = item.tech_time + ',' + Foundation.unixToDate(Math.round(new Date() / 1000))
      } else {
        item.tech_time = Foundation.unixToDate(Math.round(new Date() / 1000))
      }
      API_orderItems.editModelAndStatus(item, 1).then(res => {
        this.$message.success('保存成功！')
      })
    },
    handleProduceSave(item) {
      if (item.produced_qty) {
        if (item.produced_qty < 0) {
          this.$message.error('数量不能小于0！')
          return
        }
      }
      const adminUser = JSON.parse(Storage.getItem('admin_user'))
      item.produce_user = adminUser.uid
      if (item.produce_name) {
        item.produce_name = item.produce_name + ',' + adminUser.realname
      } else {
        item.produce_name = adminUser.realname
      }
      if (item.produce_time) {
        item.produce_time = item.produce_time + ',' + Foundation.unixToDate(Math.round(new Date() / 1000))
      } else {
        item.produce_time = Foundation.unixToDate(Math.round(new Date() / 1000))
      }
      API_orderItems.editModelAndStatus(item, 2).then(res => {
        this.$message.success('保存成功！')
      })
    },
    outExcel() {
      const json = {
        sheet_name: '产品列表',
        sheet_values: this.listData.map(item => ({
          '产品名称': item.name,
          '生产型号': item.code,
          '生产编码': item.no,
          '硬件版本': item.hard_ver,
          '软件编码': item.soft_ver,
          '数量': item.qty,
          '单价': Foundation.formatPrice(item.price),
          '销售备注': item.sales_remark
        }))
      }
      this.MixinExportJosnToExcel(json, '产品列表')
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImage = true
    },
    /** 图片上传之前的校验  */
    beforeAvatarUpload(file) {
      const isType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 3
      if (!isType) {
        this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 3MB!')
      }
      return isType && isLt1M
    },
    /** 文件列表上传成功时的钩子  上传成功校验 */
    async handleImageSuccess(response, file) {
      if (file.status === 'success') {
        this.$set(this.baseDevice[this.index], 'produce_img', response.url)
      }
    },
    handleRemove(e) {
      setTimeout(() => {
        this.$set(this.baseDevice[this.index], 'produce_img', null)
      }, 400)
    },
    handleExceed(e) {
      this.$message.error('最多只能上传一个文件！')
    },
    clickImg(index) {
      this.index = index
    },
    changeEdit(item) {
      this.changeId = item.id
      this.type_base = item.type_base
      this.goodsSelectVisible = true
    },
    goodsSelect(list) {
      if (list.length > 1) {
        this.$message.error('只能选择一个产品！')
        return
      }
      if (this.listData.findIndex(p => p.good_id === list[0].id) > -1) {
        this.$message.error('产品已存在！')
        return
      }
      const data = {
        good_id: list[0].id,
        name: list[0].name,
        code: list[0].code,
        no: list[0].no,
        image: list[0].image,
        id: this.changeId
      }
      API_orderItems.editModel(data).then(res => {
        this.$message.success('保存成功！')
        this.getData()
      })
      this.goodsSelectVisible = false
    },
    getImg(name, img) {
      if (img) {
        return [{ name: name + '备注图', url: img }]
      } else {
        return []
      }
    },
    formartLen(str) {
      console.log('str===', str)
      if (!str) {
        return ''
      } else {
        return str.length > 20 ? str.substr(0, 20) + '...' : str
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.param-item {
  display: flex;
  align-items: center;
  //justify-content: space-between;
  padding: 3px;
  font-size: 14px;

  .image {
    width: 38%;
  }
  .image img {
    width: 100px;
    height: 100px;
  }
  .info div {
    margin-bottom: 5px;
  }

  &.empty {
    background-color: #fff
  }
}
.tech_panel div{
  margin: 8px 5px 3px 3px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.myFont {
  overflow: hidden;
  text-overflow: ellipsis;      //超出部分以省略号显示
  white-space: nowrap;
  width: 16em;  //用px单位亦可行
}
</style>