ccl_plm-vue/src/views/modules/quote/detail/primary/quoteDetailOtherCost.vue

<script>
import {
  batchRemoveDetailAttribute, batchSaveDetailAttribute,
  batchUpdateDetailAttribute,
  queryQuoteDetailAttribute,
  queryQuoteDetailAttributeItem
} from "../../../../../api/quote/quoteDetailAttribute";

export default {
  name: "quoteDetailOtherCost",
  props:{
    quoteDetail: {
      type: Object,
      required: true
    }
  },
  model:{
    prop: "quoteDetail",
    event: "update"
  },
  data(){
    return{
      dataList:[],
      columns:[
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table7ItemNo',
          tableId: "5011Table7",
          tableName: "物料属性项目表",
          columnProp: 'itemNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '属性编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 110,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table7ItemDesc',
          tableId: "5011Table7",
          tableName: "物料属性项目表",
          columnProp: 'itemDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '属性名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 180,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table7ValueType',
          tableId: "5011Table7",
          tableName: "物料属性项目表",
          columnProp: 'valueType',
          headerAlign: "center",
          align: "center",
          columnLabel: '属性类型',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011TableValue',
          tableId: "5011Table",
          tableName: "common",
          columnProp: 'value',
          headerAlign: "center",
          align: "center",
          columnLabel: '属性值',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
      ],
      attribute:{
        itemNo: '',
        itemDesc: '',
      },
      updateStatus:false,
      dialogVisible:false,
      selectionDataList:[],
      itemList:[],
      selectionList:[],
    }
  },
  methods:{
    handleQueryOther(){
      let params = {
        quoteDetailId: this.quoteDetail.id
      }
      this.updateStatus = false;
      queryQuoteDetailAttribute(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
        }else {
          this.$message.warning(data.message);
        }
      }).catch((error)=>{
        this.$message.error(error.message);
      })
    },
    handleUpdateAttribute(){
      if (this.dataList.length === 0){
        this.$message.warning("请先添加属性");
        return
      }
      if (this.updateStatus === false){
        this.updateStatus = true;
        return
      }
      // 保存属性
      let params = this.dataList.map(item => {
        return{
          ...item,
          updateBy: this.$store.state.user.name,
        }
      })
      batchUpdateDetailAttribute(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQueryOther();
          this.updateStatus = false;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleSaveAttribute(){
      this.attribute ={
        itemNo: '',
        itemDesc: '',
      }
      this.handleQueryAttributeItem();
      this.dialogVisible = true;
    },
    handleQueryAttributeItem(){
      let params = {
        ...this.attribute,
        quoteDetailId: this.quoteDetail.id,
        quoteId: this.quoteDetail.quoteId,
        quoteNo: this.quoteDetail.quoteNo,
        site: this.quoteDetail.site,
        buNo: this.quoteDetail.buNo,
        versionNo: this.quoteDetail.versionNo,
        quoteDetailItemNo: this.quoteDetail.itemNo,
      }
      queryQuoteDetailAttributeItem(params).then(({data})=>{
        if (data && data.code === 0){
          this.itemList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleRowClick(row,ref){
      this.$refs[ref].toggleRowSelection(row,true)
    },
    handleSelectionChange(val){
      this.selectionDataList = val;
    },
    handleItemSelectionChange(val){
      this.selectionList = val;
    },
    handleAddAttribute(){
      if (this.selectionList.length === 0){
        this.$message.warning("请先选择属性");
        return
      }
      let params = this.selectionList.map(item => {
        return{
          ...item,
          createBy: this.$store.state.user.name,
        }
      })
      batchSaveDetailAttribute(params).then(({data})=>{
        if (data && data.code === 0) {
          this.$message.success(data.msg);
          this.handleQueryOther();
          this.handleQueryAttributeItem();
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleRemoveAttribute(){
      if (this.selectionDataList.length === 0){
        this.$message.warning("请先选择属性");
        return
      }
      batchRemoveDetailAttribute(this.selectionDataList).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.handleQueryOther();
          this.handleQueryAttributeItem();
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
  },
  created() {
    if (this.quoteDetail && this.quoteDetail.id){
      this.handleQueryOther()
    }
  },
  watch:{
    'quoteDetail.id'(newVal, oldVal){
      this.handleQueryOther()
    },
  }
}
</script>

<template>
<div>
  <el-button type="primary" :disabled="quoteDetail.status === '下达'" @click="handleSaveAttribute">新增</el-button>
  <el-button type="primary" :disabled="quoteDetail.status === '下达'" @click="handleUpdateAttribute">{{updateStatus?'保存':'编辑'}}</el-button>
  <el-table :data="dataList" style="width: 100%" border :height="420">
    <el-table-column
      v-for="(item,index) in columns" :key="index"
      :sortable="item.columnSortable"
      :prop="item.columnProp"
      :header-align="item.headerAlign"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :align="item.align"
      :fixed="item.fixed===''?false:item.fixed"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <span v-if="!item.columnHidden">
            <template v-if="item.columnProp==='valueChooseFlag'">{{ scope.row[item.columnProp] === 'Y' ? '是' : '否' }}</template>
            <template v-else-if="item.columnProp==='value' && updateStatus === true && scope.row.valueTypeDb==='T' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['textValue']" placeholder="请选择" style="width: 100%">
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.valueNo" v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="item.columnProp==='value' && updateStatus === true && scope.row.valueTypeDb==='N' && scope.row.valueChooseFlag==='Y'">
              <el-select v-model="scope.row['numValue']" placeholder="请选择" style="width: 100%">
                <el-option :label="available.availableValue" :value="available.availableValue" :key="available.valueNo" v-for="(available) in scope.row.availableList"></el-option>
              </el-select>
            </template>
            <template v-else-if="item.columnProp==='value' && updateStatus === true && scope.row.valueTypeDb==='T'">
              <el-input v-model="scope.row['textValue']"></el-input>
            </template>
            <template v-else-if="item.columnProp==='value' && updateStatus === true && scope.row.valueTypeDb==='N'">
              <el-input-number style="width: 100%" :controls="false" :step="0" v-model="scope.row['numValue']"></el-input-number>
            </template>
            <template v-else-if="item.columnProp==='value' && scope.row.valueTypeDb==='T'">
              <div style="text-align: left">{{ scope.row['textValue'] }}</div>
            </template>
            <template v-else-if="item.columnProp==='value' && scope.row.valueTypeDb==='N'">
              <div style="text-align: right">{{ scope.row['numValue'] }}</div>
            </template>
            <template v-else>{{ scope.row[item.columnProp] }}</template>
        </span>
        <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="属性信息" :visible.sync="dialogVisible" v-drag :close-on-click-modal="false" append-to-body width="1100px">
    <el-form ref="form" :model="attribute" label-position="top" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="属性编码">
            <el-input v-model="attribute.itemNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="属性名称">
            <el-input v-model="attribute.itemDesc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label=" ">
            <el-button type="primary" @click="handleQueryAttributeItem">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-container style="margin-top: 0px;">
      <el-main style="width: 350px;padding: 1px">
        <span style="font-size: 12px">可选属性：</span>
        <el-table
          height="400px"
          :data="itemList"
          @selection-change="handleItemSelectionChange"
          @row-click="(row)=>handleRowClick(row,'itemTable1')"
          border
          ref="itemTable1"
          style="width: 100%">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            prop="itemNo"
            header-align="center"
            align="center"
            min-width="150"
            label="属性编码">
          </el-table-column>
          <el-table-column
            prop="itemDesc"
            header-align="center"
            align="center"
            min-width="200"
            label="属性名称">
          </el-table-column>
        </el-table>
      </el-main>
      <el-main style="width: 10px;padding: 1px">
        <div style="margin-top: 200px;margin-left: 18px">
          <el-button type="primary" @click="handleAddAttribute">添加>></el-button>
        </div>
        <div style="margin-top: 15px;margin-left: 18px">
          <el-button type="primary" @click="handleRemoveAttribute">删除<<</el-button>
        </div>
      </el-main>
      <el-main style="width: 350px;padding: 1px">
        <span style="font-size: 12px">已有属性：</span>
        <el-table
          height="400px"
          border
          ref="itemTable2"
          :data="dataList"
          @row-click="(row)=>handleRowClick(row,'itemTable2')"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            prop="itemNo"
            header-align="center"
            align="left"
            min-width="150"
            label="属性编码">
          </el-table-column>
          <el-table-column
            prop="itemDesc"
            header-align="center"
            align="center"
            min-width="200"
            label="属性名称">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-footer style="height:40px;margin-top: 20px;text-align:center">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </el-footer>
  </el-dialog>
</div>
</template>

<style scoped>
.el-table /deep/ .cell{
  height: auto;
  line-height: 1.5;
}
</style>