1
lzhe
2024-05-24 c9ce5e7f9a9ef52c66baf4f8a6e8d9e48b7cb251
src/views/console/basic-data/product.vue
@@ -21,24 +21,25 @@
               </div>
               <el-row class="search-condition">
                  <el-col :span="5">
                     <el-select v-model="searchData.test" :prefix-icon="Search" placeholder="请选择" style="width: 100%;padding-right: 20px;">
                     <el-select multiple v-model="searchData.typeId" :prefix-icon="Search" placeholder="请选择" style="width: 100%;padding-right: 20px;">
                        <template #prefix><span style="margin-right: 6px;">产品类型</span></template>
                        <el-option v-for="item in testList" :key="item.value" :label="item.label" :value="item.value" />
                        <el-option v-for="item in typeIdList" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                  </el-col>
                  <el-col :span="5">
                     <el-input v-model="searchData.test" placeholder="请输入" style="padding-right: 20px;">
                     <el-input v-model="searchData.standardModel" placeholder="请输入" style="padding-right: 20px;">
                        <template #prefix><span style="margin-right: 6px;">规格型号</span></template>
                     </el-input>
                  </el-col>
                  <el-col :span="5">
                     <el-select v-model="searchData.test" :prefix-icon="Search" placeholder="请选择" style="width: 100%;padding-right: 20px;">
                     <el-select v-model="searchData.status" :prefix-icon="Search" placeholder="请选择" style="width: 100%;padding-right: 20px;">
                        <template #prefix><span style="margin-right: 6px;">状态</span></template>
                        <el-option v-for="item in testList" :key="item.value" :label="item.label" :value="item.value" />
                        <el-option key="0" label="停用" value="0" />
                        <el-option key="1" label="启用" value="1" />
                     </el-select>
                  </el-col>
                  <el-col :span="5">
                     <el-input v-model="searchData.test" placeholder="请输入">
                     <el-input v-model="searchData.keyWord" placeholder="请输入">
                        <template #prefix><span style="margin-right: 6px;">编号/名称</span></template>
                     </el-input>
                  </el-col>
@@ -46,55 +47,134 @@
                     <el-icon @click="addDrawer" class="searchi-icon"><Setting /></el-icon>
                  </el-col>
               </el-row>
               <div class="product-type-table">
                  <el-table ref="multipleTableRef0" :data="productTableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange0" row-key="id" lazy :load="tableLoad" :tree-props="{ hasChildren: 'hasChild' }">
                     <el-table-column type="selection" width="55" />
                     <el-table-column prop="name" label="产品名称"></el-table-column>
                     <el-table-column prop="code" label="产品编号"></el-table-column>
                     <el-table-column prop="typeName" label="产品类型"></el-table-column>
                     <el-table-column prop="unit" label="计量单位"></el-table-column>
                     <el-table-column prop="standardModel" label="规格型号"></el-table-column>
                     <el-table-column prop="description" label="产品描述"></el-table-column>
                     <el-table-column prop="remark" label="工艺路线">
                        <template #default="scope">
                             <span class="viewDetial">查看详情</span>
                          </template>
                     </el-table-column>
                     <el-table-column prop="remark" label="BOM清单">
                        <template #default="scope">
                             <span class="viewDetial">查看详情</span>
                          </template>
                     </el-table-column>
                     <el-table-column fixed="right" label="操作" width="200px">
                        <template #default="scope">
                           <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                           <el-button text type="primary" size="small" @click="refresh_product_type(scope.row, scope.$index)">刷新</el-button>
                           <el-button text type="primary" size="small" @click="del_product_type(scope.row, scope.$index,0)">删除</el-button>
                        </template>
                     </el-table-column>
                  </el-table>
                  <el-pagination
                     style="margin-top: 12px;"
                     @size-change="handleSizeChange0"
                     @current-change="handleCurrentChange0"
                     :current-page="currentPage4"
                     :page-sizes="[15, 50, 100]"
                     :page-size="15"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total0">
                  </el-pagination>
               </div>
               <el-drawer title="查询设置" v-model="drawer" :direction="direction" :before-close="handleClose" size="780" class="drawerClass">
                  <div>
                  <div class="drawer-form">
                     <div class="drawer-left">
                        <div class="plan-content-title">基础字段</div>
                        <el-checkbox-group v-model="checkData">
                            <el-checkbox v-for="item in checkList" :label="item.fieldName" :value="item.fieldId" />
                          </el-checkbox-group>
                          <div class="plan-content-title">扩展字段</div>
                     </div>
                     <div class="drawer-right">
                        <div class="plan-content-title">已选字段</div>
                        <ul class="drawer-ul">
                           <li v-for="(item,index) in checkData">
                              <span>{{item}}</span>
                              <el-icon style="cursor: pointer;" @click="delIcon(index)"><Delete /></el-icon>
                           </li>
                        </ul>
                     </div>
                  </div>
                  <div class="drawer-foot">
                     <el-button @click="closeDrawer">关闭</el-button>
                     <el-button type="primary" @click="drawerConfirm" disabled>保存</el-button>
                     <el-button type="primary" @click="drawerConfirm">保存</el-button>
                  </div>
               </el-drawer>
            </div>
         </el-tab-pane>
         <el-tab-pane label="产品类型" name="second">
            <!-- <person-post v-if="activeName == 'second'"></person-post> -->
            <div v-if="activeName == 'second'">
               <div>
                  <el-button type="primary" @click="addTypeData" class="marginR12">快速添加</el-button>
                  <el-button type="danger" plain @click="delTypeData" class="marginR12">删除</el-button>
               </div>
               <el-row style="margin-top: 12px;" v-if="isAddType">
                  <el-col :span="4">
                     <el-input v-model="typeData.name" size="small" placeholder="请输入名称" style="padding-right: 20px;"></el-input>
                  </el-col>
                  <el-col :span="4">
                     <el-input v-model="typeData.remark" size="small" placeholder="请输入描述" style="padding-right: 20px;"></el-input>
                  </el-col>
                  <el-col :span="4">
                     <el-button type="primary" size="small" @click="addTypeDataSubmit">确定</el-button>
                     <el-button size="small" @click="addTypeDataCencel">取消</el-button>
                  </el-col>
               </el-row>
               <div class="product-type-table">
                  <el-table ref="multipleTableRef1" :data="productTypeTableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange1">
                     <el-table-column type="selection" width="55" />
                     <el-table-column prop="name" label="产品类型名称"></el-table-column>
                     <el-table-column prop="remark" label="描述"></el-table-column>
                     <el-table-column prop="status" label="状态">
                        <template #default="scope">
                             <span>{{ scope.row.status == "1"?"启用":"停用" }}</span>
                          </template>
                     </el-table-column>
                     <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                           <el-button text type="primary" size="small" @click="del_product_type(scope.row, scope.$index,1)">删除</el-button>
                        </template>
                     </el-table-column>
                  </el-table>
                  <el-pagination
                     style="margin-top: 12px;"
                     @size-change="handleSizeChange1"
                     @current-change="handleCurrentChange1"
                     :current-page="currentPage4"
                     :page-sizes="[15, 50, 100]"
                     :page-size="15"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="productTypeTableData.length">
                  </el-pagination>
               </div>
            </div>
         </el-tab-pane>
      </el-tabs>
      <!-- <div>
         <div class="Product-table">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
               <el-table-column prop="ProductValue" label="字典名称"></el-table-column>
               <el-table-column prop="sort" label="字典排序"></el-table-column>
               <el-table-column prop="isSealed" label="封存">
                  <template #default="scope">
                     <div>{{scope.row.isSealed == 0?"否":"是"}}</div>
                  </template>
               </el-table-column>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                     <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                     <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     <el-button text type="primary" size="small" @click="table_allocation(scope.row, scope.$index)">字典配置</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <el-pagination
               style="margin-top: 12px;"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage4"
               :page-sizes="[15, 50, 100]"
               :page-size="15"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
         </div> -->
   </div>
   
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="addProductSuccess" @closed="dialog.save=false"></save-dialog>
   <!-- 删除 -->
   <el-dialog title="" v-model="delTypeModel" :width="400" destroy-on-close>
      <div>
         <div style="margin-bottom: 6px;"><span class="delIcon">!</span>请你谨慎选择!</div>
         <div style="text-indent: 24px;">删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, 您可以选择 停用 操作。停用后此数据将不能再被新业务使用。</div>
      </div>
      <template #footer>
         <div class="footerDiv">
            <div class="delBtn" @click="delTypeDataSingle(0)">删除</div>
            <div class="delBtn" @click="delTypeDataSingle(1)">停用</div>
         </div>
      </template>
   </el-dialog>
</template>
<script>
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
@@ -108,35 +188,148 @@
      name: "allocation",
      data(){
         return {
            total0: 0,
            productTableData: [],
            checkData: [],
            checkList: [],
            id: "",
            delTypeModel: false,
            isAddType: false,
            typeData: {
               name: "",
               remark: ""
            },
            productTypeTableData: [],
            typeIdList: [],
            direction: "rtl",
            drawer: false,
            testList: [],
            uploadUrl: "/api/blade-cps/employee/import-employee",
            exportUrl: "/api/blade-cps/employee/export-template",
            activeName: 'first',
            selection: [],
            selection0: [],
            selection1: [],
            total: 0,
            searchData: {
               test: "",
               keyWord: "",
               standardModel: "",
               status: "1",
               typeId: [],
               current: "1",
               size: "15"
            },
            dialog: {
               save: false
            },
            tableData: []
            tableData: [],
            delTypeNum: ""
         }
      },
      created(){
         
      },
      mounted(){
         //this.searchBtn();
         this.searchBtn0();
         this.getProductType();
         this.getProductTypeSelect();
         this.getFields();  //查询设置
      },
      components: {
         ...ElementPlusIconsVue,saveDialog,importTable
      },
      methods: {
         tableLoad(row,treeNode,resolve) {
            this.searchData.parentId= row.id;
            this.$HTTP.post(`/api/blade-cps/product/lazy/tree?current=1&size=-1&id=${row.id}`).then(res=> {
               if(res.code == 200) {
                  resolve(res.data.records);
               }
            })
         },
         delIcon(index) {
            this.checkData.splice(index,1);
         },
         getFields() {
            this.$HTTP.get(`/api/blade-system/custom-template-field-relation/getConditionFields?templateId=`).then(res => {
               if (res.code == 200) {
                  this.checkList = res.data.systemFieldList;
                  res.data.systemFieldList.forEach(item=> {
                     if(item.querySupport == 1) this.checkData.push(item.fieldName);
                  })
               }
            })
         },
         delTypeDataSingle(type) {
            if(this.delTypeNum == 0) {  //删除产品
               var url = "/api/blade-cps/product/remove";
               var stopUrl = "/api/blade-cps/product/change-status";
            }else if(this.delTypeNum == 1) {  //删除产品类型
               var url = "/api/blade-cps/product-type/remove";
               var stopUrl = "/api/blade-cps/product-type/change-status";
            }
            if(type == 0) {  //删除
               this.$HTTP.delete(url,[this.id]).then(res=> {
                  if(res.code == 200) {
                     this.$message.success("操作成功");
                     this.delTypeModel = false;
                     this.id = "";
                     this.getProductType();
                  }
               })
            }else {  //停用
               var obj = {
                  ids: [this.id],
                  status: 0
               }
               this.$HTTP.put(stopUrl ,obj).then(res=> {
                  if(res.code == 200) {
                     this.$message.success("操作成功");
                     this.delTypeModel = false;
                     this.id = "";
                     this.getProductType();
                  }
               })
            }
            this.getProductTypeSelect();
         },
         addTypeDataSubmit() {
            this.$HTTP.post(`/api/blade-cps/product-type/saveOrUpdate`,this.typeData).then(res => {
               if (res.code == 200) {
                  this.getProductType();
                  this.clearTypeData();
                  this.getProductTypeSelect();
               }
            })
         },
         addTypeDataCencel() {
            this.clearTypeData();
         },
         clearTypeData() {
            this.isAddType = false;
            this.typeData = {
               name: "",
               remark: ""
            }
         },
         getProductType() {
            this.$HTTP.get(`/api/blade-cps/product-type/page?current=1&size=10`).then(res => {
               if (res.code == 200) {
                  this.productTypeTableData = res.data.records;
               }
            })
         },
         del_product_type(row,index,type) {
            this.delTypeNum = tyype;
            this.id = row.id;
            this.delTypeModel = true;
         },
         getProductTypeSelect() {
            this.$HTTP.get(`/api/blade-cps/product-type/page?size=-1`).then(res => {
               if (res.code == 200) {
                  this.typeIdList = res.data.records;
               }
            })
         },
         addDrawer() {
            this.drawer = true;
         },
@@ -144,13 +337,30 @@
            this.drawer = false;
         },
         drawerConfirm() {
            var ids = [];
            this.checkList.forEach(item=> {
               this.checkData.forEach(item1=> {
                  if(item1 == item.fieldName) {
                     ids.push(item.fieldId)
                  }
               })
            })
            var obj = {
               ids: ids,
               templateId: ""
            }
            this.$HTTP.post(`/api/blade-system/custom-template-field-relation/submitConditionFields`,obj).then(res => {
               if (res.code == 200) {
                  this.$message.success("操作成功");
               }
            })
            this.drawer = false;
         },
         handleClose(done) {
              done();
          },
         getExport() {
            this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
            this.$HTTP.post(`/api/blade-cps/product/export-product`,this.searchData).then(res => {
               if (res.code == 200) {
                  window.open(res.data.link);
               }
@@ -170,23 +380,28 @@
         },
         searchClearBtn() {
            this.searchData = {
               code: "",
               ProductValue: "",
               keyWord: "",
               standardModel: "",
               status: "1",
               typeId: [],
               current: "1",
               size: "15"
            }
            this.searchBtn();
            this.searchBtn0();
         },
         refresh_product_type() {
            this.searchClearBtn();
         },
         searchclick() {
            this.searchData.current = "1";
            this.searchData.size = "15";
            this.searchBtn();
            this.searchBtn0();
         },
         searchBtn() {
            this.$HTTP.get("/api/blade-system/Product/parent-list",this.searchData).then(res=> {
         searchBtn0() {
            this.$HTTP.post("/api/blade-cps/product/lazy/tree?current=1&size=15&id=0",this.searchData).then(res=> {
               if(res.code == 200) {
                  this.tableData = res.data.records;
                  this.total = res.data.total;
                  this.productTableData = res.data.records;
                  this.total0 = res.data.total;
               }
            })
         },
@@ -206,7 +421,7 @@
               this.$HTTP.post("/api/blade-system/Product/remove?ids="+row.id).then(res=> {
                  if(res.code == 200) {
                     that.$message.success("操作成功");
                     that.searchBtn();
                     that.searchBtn1();
                  }
               })
            }).catch(() => {
@@ -217,16 +432,16 @@
         addData(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open()
               this.$refs.saveDialog.open(this.typeIdList)
            })
         },
         table_edit(row){
            this.dialog.save = true
            this.$HTTP.get("/api/blade-system/Product/detail?id="+row.id).then(res=> {
            this.$HTTP.get(`/api/blade-cps/product/get/${row.id}`).then(res=> {
               if(res.code == 200) {
                  this.dialog.save = true;
                  this.$nextTick(() => {
                     this.$refs.saveDialog.open('edit').setData(res.data);
                     this.$refs.saveDialog.open(this.typeIdList,'edit').setData(res.data);
                  })
               }
            })
@@ -238,40 +453,66 @@
               this.$refs.saveDialog.open('show').setData(row)
            })
         },
         handleSelectionChange(selection) {
            this.selection = selection;
         handleSelectionChange0(selection) {
            this.selection0 = selection;
         },
         delData() {
            if(this.selection.length == 0) {
         handleSelectionChange1(selection) {
            this.selection1 = selection;
         },
         addTypeData() {
            this.isAddType = true;
         },
         delTypeData() {
            if(this.selection1.length == 0) {
               this.$message({
                   message: '请选择至少一条数据',
                   type: 'warning'
                 });
                 return;
            }
            var selStr = "";
            this.selection.map(item=> {
               selStr += item.id + ","
            })
            selStr = selStr.replace(/,$/, '');
            var that = this;
            this.$HTTP.post("/api/blade-system/Product/remove?ids="+selStr).then(res=> {
               if(res.code == 200) {
                  that.$message.success("操作成功");
                  that.searchclick();
               }
            })
         },
         handleSizeChange(val) {
         delData() {
            if(this.selection0.length == 0) {
               this.$message({
                   message: '请选择至少一条数据',
                   type: 'warning'
                 });
                 return;
            }
            // var selStr = "";
            // this.selection1.map(item=> {
            //    selStr += item.id + ","
            // })
            // selStr = selStr.replace(/,$/, '');
            // var that = this;
            // this.$HTTP.post("/api/blade-system/Product/remove?ids="+selStr).then(res=> {
            //    if(res.code == 200) {
            //       that.$message.success("操作成功");
            //       that.searchclick();
            //    }
            // })
         },
         handleSizeChange0(val) {
            console.log(`每页 ${val} 条`);
            this.searchData.current = "1";
            this.searchData.size = val;
            this.searchBtn();
            this.searchBtn0();
         },
         handleCurrentChange(val) {
         handleCurrentChange0(val) {
            console.log(`当前页: ${val}`);
            this.searchData.current = val;
            this.searchBtn();
            this.searchBtn0();
         },
         handleSizeChange1(val) {
            console.log(`每页 ${val} 条`);
            this.searchData.current = "1";
            this.searchData.size = val;
            this.searchBtn1();
         },
         handleCurrentChange1(val) {
            console.log(`当前页: ${val}`);
            this.searchData.current = val;
            this.searchBtn1();
         }
      }
   }
@@ -288,7 +529,7 @@
      padding-right: 8px;
      margin-bottom: 8px;
   }
   .multipleTableRef {
   .multipleTableRef1,.multipleTableRef0 {
      margin-bottom: 8px;
   }
   .search-condition {
@@ -306,4 +547,89 @@
      margin-left: 12px;
      margin-top: 7px;
   }
   .product-type-table {
      margin-top: 12px;
   }
   .delIcon {
      color: #fff;
      background: red;
      border-radius: 50%;
      display: inline-block;
      width: 20px;
      height: 20px;
      font-size: 14px;
      text-align: center;
      line-height: 20px;
      margin-right: 6px;
   }
   .footerDiv {
      text-align: center;
   }
   .delBtn {
      color: #fff;
      width: 112px;
      height: 32px;
      display: inline-block;
      color: #fa554c;
      background-color: #fff;
      border: 1px solid #fdbbb7;
      text-align: center;
      line-height: 32px;
      cursor: pointer;
   }
   .delBtn:nth-child(1) {
      margin-right: 4px;
   }
   .delBtn:hover {
      background-color: #f34d5b;
      border-color: #f34d5b;
      color: #fff;
   }
   .drawer-foot {
      position: fixed;
       bottom: 20px;
       right: 20px;
   }
   .plan-content-title {
      border-left: 2px solid #337ecc;
       padding: 0 8px;
       font-weight: 700;
       font-size: 14px;
       text-align: left;
       color: #333;
       margin-bottom: 16px;
       margin-top: 12px;
   }
   .drawer-form {
      height: calc(100% - 60px);
       overflow: auto;
       border-top: 1px solid rgba(59,142,142,.18);
       border-bottom: 1px solid rgba(59,142,142,.18);
       padding: 0 24px;
       display: flex;
   }
   .drawer-left {
      width:70%;
      border-right: 1px solid rgba(59,142,142,.18);
      padding: 24px;
   }
   .drawer-right {
      flex: 1;
      padding: 24px;
   }
   .drawer-ul li {
      list-style: none;
       font-size: 14px;
       margin-bottom: 12px;
   }
   .drawer-ul li span {
      margin-right: 50px;
      display: inline-block;
      min-width: 80px;
   }
   .viewDetial {
      color: #337ecc;
      cursor: pointer;
   }
</style>