1

lzhe

2024-05-20 e929925ce9b9d9601697aabdb7d0fcfd7dee8a3a

 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>
@@ -47,54 +48,95 @@
                  </el-col>
               </el-row>
               <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="multipleTableRef" :data="productTypeTableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                     <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)">删除</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="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,6 +150,17 @@
      name: "allocation",
      data(){
         return {
            checkData: [],
            checkList: [],
            id: "",
            delTypeModel: false,
            isAddType: false,
            typeData: {
               name: "",
               remark: ""
            },
            productTypeTableData: [],
            typeIdList: [],
            direction: "rtl",
            drawer: false,
            testList: [],
@@ -117,7 +170,10 @@
            selection: [],
            total: 0,
            searchData: {
               test: "",
               keyWord: "",
               standardModel: "",
               status: "1",
               typeId: [],
               current: "1",
               size: "15"
            },
@@ -132,11 +188,90 @@
      },
      mounted(){
         //this.searchBtn();
         this.getProductType();
         this.getProductTypeSelect();
         this.getFields();  //查询设置
      },
      components: {
         ...ElementPlusIconsVue,saveDialog,importTable
      },
      methods: {
         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(type == 0) {  //删除
               this.$HTTP.delete(`/api/blade-cps/product-type/remove`,[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(`/api/blade-cps/product-type/change-status`,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) {
            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,6 +279,23 @@
            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) {
@@ -241,6 +393,12 @@
         handleSelectionChange(selection) {
            this.selection = selection;
         },
         addTypeData() {
            this.isAddType = true;
         },
         delTypeData() {

         },
         delData() {
            if(this.selection.length == 0) {
               this.$message({
@@ -306,4 +464,86 @@
      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;
   }
</style>