ncs_project/manager-admin/src/views/pjDraft/FsGoods.vue

<template>
  <div class="container">
    <el-alert type="warning"
              :title="type+'项目条目'"
              description="选择主机，选择从设备，再其它可选"
              :closable="false" show-icon style="margin-bottom: 15px"></el-alert>
    <el-tabs>
      <el-tab-pane label="图表">
        <el-divider>标准配置 <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddBase">添加</el-button></el-divider>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="8" v-for="item in baseDevice" :key="item.id">
            <el-card shadow="always" :class="item.id?'green-border':''">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
                <el-button style="float: right; padding: 3px 0;" type="text" icon="el-icon-circle-close" @click="handleItemDelete(item.id)">删除</el-button>
                <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" icon="el-icon-edit-outline" @click="handleItemSave(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.price_advise }}</div>
                    <div>生产周期：{{ item.produce_day }}天</div>
                    <div><b style="color:red">* </b>数量：<el-input v-model="item.qty" size="small" type="number" style="width: 100px"></el-input></div>
                    <div><b style="color:red">* </b>价格：<el-input v-model="item.price" size="small" type="number" style="width: 100px"></el-input></div>
                  </div>
                </div>
                <div>
                  <el-input type="textarea" rows="3" placeholder="备注，最大300字" maxlength="300" show-word-limit v-model="item.sales_remark"></el-input>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-divider>其它选配 <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddAddon">添加</el-button></el-divider>
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
          <el-col :span="8" v-for="item in addonDevice" :key="item.id">
            <el-card shadow="always" :class="item.id?'green-border':''" style="margin-top:15px;">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
                <el-button style="float: right; padding: 3px 0;" type="text" icon="el-icon-circle-close" @click="handleItemDelete(item.id)">删除</el-button>
                <el-button style="float: right; padding: 3px 0;margin-right: 5px" type="text" icon="el-icon-edit-outline" @click="handleItemSave(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.price_advise }}</div>
                    <div>生产周期：{{ item.produce_day }}天</div>
                    <div><b style="color:red">* </b>数量：<el-input v-model="item.qty" size="small" type="number" style="width: 100px"></el-input></div>
                    <div><b style="color:red">* </b>价格：<el-input v-model="item.price" size="small" type="number" style="width: 100px"></el-input></div>
                  </div>
                </div>
                <div>
                  <el-input type="textarea" rows="3" placeholder="备注，最大300字" maxlength="300" show-word-limit v-model="item.sales_remark"></el-input>
                </div>
              </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" label="生产型号"></el-table-column>
          <el-table-column prop="no" label="生产编码"></el-table-column>
          <el-table-column prop="qty" label="数量"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="sales_remark" 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-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_draftGoods from '@/api/pjDraftGoods.js'
import { Foundation } from '~/ui-utils'
import goodsSelect from '../goods/goodsSelect.vue'

export default {
  name: 'draftFsGoods',
  components: { goodsSelect },
  props: {
    draftId: {
      type: Number,
      value: 0
    },
    type: {
      type: String,
      value: '服务器版'
    }
  },
  data() {
    return {
      keyId: '',
      params: {
        page_no: 1,
        page_size: 1000,
        sort: 'type_base',
        dir: 'desc'
      },
      listData: [],
      baseDevice: [],
      addonDevice: [],

      goodsSelectVisible: false,
      type_base: true
    }
  },
  mounted() {
    console.log(this.$route.params)
    if (this.$route.params && this.$route.params.id !== 0) {
      this.keyId = this.$route.params.id
      this.getData()
    }
  },
  activated() {
    if (this.$route.params && this.$route.params.id !== 0) {
      this.keyId = this.$route.params.id
      this.getData()
    }
  },
  methods: {
    getData() {
      this.params.fixedCondition = 'draft_id=' + this.draftId
      API_draftGoods.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)
      })
    },
    handleAddBase() {
      this.type_base = true
      this.goodsSelectVisible = true
    },
    handleAddAddon() {
      this.type_base = false
      this.goodsSelectVisible = true
    },
    goodsSelect(list) {
      let data = JSON.parse(JSON.stringify(list))
      data.forEach(item => {
        item.good_id = item.id
        item.id = null
        if (this.listData.filter(p => p.good_id === item.good_id).length === 0) {
          item.qty = 1
          item.price = item.price_advise
          this.listData.push(item)
        }
      })
      this.baseDevice = this.listData.filter(p => p.type_base)
      this.addonDevice = this.listData.filter(p => !p.type_base)
      this.goodsSelectVisible = false
    },
    handleItemDelete(id) {
      this.$confirm('确认删除, 是否继续?', '提示', { type: 'warning' }).then(() => {
        API_draftGoods.deletes(id).then(() => {
          this.getData()
          this.$message.success('删除成功！')
        })
      })
    },
    handleItemSave(item) {
      if (!(item.qty && item.price)) {
        this.$message.error('数量和价格不能为空')
        return false
      }
      item.draft_id = this.draftId
      if (item.id) {
        API_draftGoods.editModel(item).then(res => {
          this.$message.success('修改成功！')
        })
      } else {
        API_draftGoods.addModel(item).then(res => {
          this.$message.success('添加成功！')
          this.listData.forEach(p => {
            if (p.good_id === item.good_id) {
              p.id = res.data.id
              this.baseDevice = this.listData.filter(p => p.type_base)
              this.addonDevice = this.listData.filter(p => !p.type_base)
            }
          })
        })
      }
    },
    outExcel() {
      const json = {
        sheet_name: '产品列表',
        sheet_values: this.listData.map(item => ({
          '产品名称': item.name,
          '生产型号': item.code,
          '生产编码': item.no,
          '数量': item.qty,
          '单价': Foundation.formatPrice(item.price),
          '备注': item.sales_remark
        }))
      }
      this.MixinExportJosnToExcel(json, '产品列表')
    }
  }
}
</script>

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

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

  &.empty {
    background-color: #fff
  }
}
.green-border {
  border-color: #13ce66;
}
/deep/ .el-drawer__body{
  overflow-y: scroll;
}
</style>