yos_web/src/components/addTable/btnAdd.vue

<template>
  <div>
    <el-button
        size="small"
        type="primary"
        @click="addBtn((drawerVisible = true))"
    >{{ $t(btnTitle)}}</el-button
    >
    <el-drawer
        :title="$t(drawerTitle)"
        :visible.sync="drawerVisible"
        size="80%"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="drawer__panel" style="margin-bottom: 0 !important;">
        <div class="flex-between" v-if="drawerTitle == '自产品档案添加'">
          <el-select
              v-model="where.sa_brandid"
              :placeholder="$t(`选择品牌`)"
              size="small"
              clearable
              class="inline-24"
              @change="brandChange"
          >
            <el-option
                v-for="item in options.brands"
                :key="item.sa_brandid"
                :label="$t(item.brandname)"
                :value="item.sa_brandid"
            >
            </el-option>
          </el-select>
          <el-cascader
              :placeholder="$t(`选择分类`)"
              size="small"
              v-model="itemclassid"
              :options="options.itemclass"
              :props="{
              checkStrictly: true,
              children: 'subdep',
              label: 'itemclassname',
              value: 'itemclassid',
            }"
              clearable
              @change="classChange"
          ></el-cascader>
        </div>
        <div class="top-margin" v-if="drawerTitle == '自产品档案添加'">
          <el-button
              size="small"
              :type="selectList.length == 0?'':'primary'"
              :loading="loading"
              @click="onSubmit"
              class="normal-btn-width inline-24"
              :disabled="selectList.length == 0"
          >{{ $t("添加选中商品") }}</el-button
          >
          <el-input  style="width:200px;" :placeholder="$t('搜索')" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'"
                     v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)"
                     size="small" class="input-with-select inline-24 layout_search__panel" clearable>
          </el-input>
          <el-select
              v-model="where.standards"
              :placeholder="$t(`选择标准`)"
              size="small"
              clearable
              class="inline-24 bottom-margin"
              @change="selectChange"
          >
            <el-option
                v-for="item in options.itemstandards"
                :key="item.value"
                :label="$t(item.value)"
                :value="item.value"
            >
              <span style="float: left">{{ $t(item.value) }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{
                  item.remarks ? $t(item.remarks) : $t("暂无描述")
                }}</span>
            </el-option>
          </el-select>
          <el-select
              v-model="where.material"
              :placeholder="$t(`选择材质`)"
              size="small"
              clearable
              class="inline-24 bottom-margin"
              @change="selectChange"
          >
            <el-option
                v-for="item in options.itemmaterials"
                :key="item.value"
                :label="$t(item.value)"
                :value="item.value"
            >
              <span style="float: left">{{ $t(item.value) }}</span>
              <span style="float: right; color: #8492a6; font-size: 12px">{{
                  item.remarks ? $t(item.remarks) : $t("暂无描述")
                }}</span>
            </el-option>
          </el-select>
          <el-input
              style="width: 200px"
              :placeholder="$t(`型号`)"
              :suffix-icon="
              where.model
                ? where.model.length > 0
                  ? ''
                  : ''
                : 'el-icon-search'
            "
              v-model="where.model"
              @keyup.native.enter="selectChange"
              @clear="selectChange"
              size="small"
              class="bottom-margin input-with-select inline-24 layout_search__panel"
              clearable
          >
          </el-input>
          <el-input
              style="width: 200px"
              :placeholder="$t(`规格`)"
              :suffix-icon="
              where.spec
                ? where.spec.length > 0
                  ? ''
                  : ''
                : 'el-icon-search'
            "
              v-model="where.spec"
              @keyup.native.enter="selectChange"
              @clear="selectChange"
              size="small"
              class="bottom-margin input-with-select inline-24 layout_search__panel"
              clearable
          >
          </el-input>
        </div>
        <el-input v-else style="width:200px;" :placeholder="$t('搜索')" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'"
                   v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)"
                   size="small" class="input-with-select inline-24 layout_search__panel" clearable>
        </el-input>
        <table-detail :layout="tablecols" :checkbox="true" :data="list" :custom="true" :width="true" :height="tableHieght" minHeight="200px" fixedName="operation"
                      @selectionChange="selectionChange" >
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname == 'nominalpressure'">
              {{tool.nominalPressureSet(scope.column.data[[scope.column.columnname]])}}
            </div>
            <div v-else>
              {{scope.column.data[[scope.column.columnname]] || scope.column.columnname === 'operation'?scope.column.data[[scope.column.columnname]]:'--'}}
            </div>
          </template>
        </table-detail>
        <div  class="container normal-panel" style="text-align:right;padding-bottom: 0!important;">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[50, 100, 150, 200]"
              :page-size="50"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div class="fixed__btn__panel">
        <el-button
            size="small"
            @click="drawerVisible = false"
            class="normal-btn-width inline-16"
        >{{ $t("取 消") }}</el-button
        >
        <el-button
            size="small"
            type="primary"
            :loading="loading"
            @click="onSubmit"
            class="normal-btn-width"
            :disabled="selectList.length == 0"
        >{{ $t("确 定") }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "btnAdd",
  props:['btnTitle','drawerTitle','param','tablecols','sa_workorderid'],
  data(){
    return {
      drawerVisible:false,
      tableHieght:this.drawerTitle == '自产品档案添加'?'calc(100vh - 300px)':'calc(100vh - 240px)',
      list:[],
      currentPage:0,
      total:0,
      loading:false,
      selectList:[],
      sa_brandid:"",
      itemclassid: "",
      itemstandard: "",
      itemmaterial: "",
      options: {
        brands: [],
        itemclass: [],
        itemstandards: [],
        itemmaterials: [],
      },
      where:{
        "condition": "",
        "sa_brandid": "",
        "itemclassid":"",
        "standards": "",
        "material": "",
        "spec":"",
        "model":"",
        "tradefield":""
      }
    }
  },
  methods:{
    addBtn(){
      this.drawerVisible = true
      this.selectList = []
      this.listData(this.param.content.pageNumber = 1)
      this.queryBrands()
      this.$store.dispatch("optiontypeselect", "itemstandards").then((res) => {
        this.options.itemstandards = res.data;
      });
      this.$store.dispatch("optiontypeselect", "itemmaterial").then((res) => {
        this.options.itemmaterials = res.data;
      });
    },
    async listData(){
      const res = await this.$api.requested(this.param)
      console.log(res.data,'data')
      this.list = res.data
      this.currentPage = res.pageNumber
      this.total = res.total
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    selectionChange(select){
      console.log(select)
      this.selectList = select
    },
    async onSubmit(){
      let iteminfos = this.selectList.map(item =>{
        return {
          "sa_workorder_node_itemsid":0,
          "problem_description":item.problem_description,
          "processing":item.processing,
          "result":item.result,
          "reason":item.reason,
          "qty":item.qty || 1,
          "itemid":item.itemid
        }
      })
      const res = await this.$api.requested({
        id:20230215201903,
        content:{
          sa_workorder_nodeid:0,
          sa_workorderid:this.sa_workorderid,
          iteminfos:iteminfos
        }
      })
      if (res.code == 0){
        this.tool.showMessage(res,()=>{})
      }else {
        this.drawerVisible = false
        this.$emit('addSuccess')
      }
    },
    brandChange(){
      this.selectChange()
      this.queryClass()
    },
    /*获取品牌*/
    async queryBrands() {
      const res = await this.$api.requested({
        id: "2026032009554702",
        content: {
          pageSize: 1000,
          where: {
            condition: "",
          },
        },
      });
      this.options.brands = res.data;
      console.log("获取品牌", res.data);
    },
    /*获取分类*/
    async queryClass() {
      const res = await this.$api.requested({
        id: "2026032010050802",
        content: {
          sa_brandid: this.where.sa_brandid !== "" ? this.where.sa_brandid : 0,
        },
      });
      let arr = [];
      function converTree(node) {
        var elNode = {
          isdeep: node["isdeep"],
          ishide: node["ishide"],
          istool: node["istool"],
          itemclassfullname: node["itemclassfullname"],
          itemclassfullnum: node["itemclassfullnum"],
          itemclassid: node["itemclassid"],
          itemclassname: node["itemclassname"],
          itemclassnum: node["itemclassnum"],
          num: node["num"],
          parentid: node["parentid"],
          rowindex: node["rowindex"],
          subdep: [],
        };
        if (node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
            elNode.subdep.push(converTree(node.subdep[index]));
          }
        } else {
          elNode = {
            isdeep: node["isdeep"],
            ishide: node["ishide"],
            istool: node["istool"],
            itemclassfullname: node["itemclassfullname"],
            itemclassfullnum: node["itemclassfullnum"],
            itemclassid: node["itemclassid"],
            itemclassname: node["itemclassname"],
            itemclassnum: node["itemclassnum"],
            num: node["num"],
            parentid: node["parentid"],
            rowindex: node["rowindex"],
          };
        }
        return elNode;
      }
      // this.options.itemclass = arr
      res.data[0].ttemclass.forEach((e) => {
        arr.push(converTree(e));
      });

      this.options.itemclass = arr;
      return arr;
    },
    classChange(){
      this.where.itemclassid = this.itemclassid[this.itemclassid.length -1]
      this.selectChange()
    },
    selectChange(){
      this.param.content.where = this.where
      this.listData(this.param.content.pageNumber = 1)
    },
    onClose(){
      this.sa_brandid = ''
      this.itemclassid = ''
      this.where = {
        "condition": "",
        "sa_brandid": "",
        "itemclassid":"",
        "standards": "",
        "material": "",
        "spec":"",
        "model":"",
        "tradefield":""
      }
      this.selectList = []
      this.selectChange()
    }
  },

}
</script>

<style scoped>
.image {
  height: 38px;
  width: 38px;
  margin-top: 0;
}
.top-margin {
  margin-top: 20px;
}
.bottom-margin {
  margin-bottom: 20px;
}
/deep/ input::-webkit-input-placeholder {
  color: #58585d;
}
/deep/ input::-moz-input-placeholder {
  color: #58585d;
}
/deep/ input::-ms-input-placeholder {
  color: #58585d;
}
</style>