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-divider>标准配置 <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddBase">添加</el-button></el-divider>
    <el-row :gutter="24">
      <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">
                <img :src="item.image">
              </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">
      <el-col :span="8" v-for="item in addonDevice" :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">
                <img :src="item.image">
              </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-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
      },
      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) {
      console.log(list)
      list.forEach(item => {
        item.id = null
        if (this.listData.filter(p => p.code === item.code).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.code === item.code) {
              p.id = res.data.id
              this.baseDevice = this.listData.filter(p => p.type_base)
              this.addonDevice = this.listData.filter(p => !p.type_base)
            }
          })
        })
      }
    }
  }
}
</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: 35%;
  }
  .image img {
    width: 120px;
    height: 120px;
  }
  .info div {
    margin-bottom: 5px;
  }

  &.empty {
    background-color: #fff
  }
}
.green-border {
  border-color: #13ce66;
}
</style>