saber/src/views/codeRule/ruleManage.vue

<template>
  <div class="container-box">
     <el-row :gutter="20" class="h-100">
        <el-col :span="6" class="h-100">
                <div class="h-100">
                <el-card class="box-card h-100">
                    <div class="tree-container">
                    <el-scrollbar>
                        <el-tree 
                        lazy
                        :load="loadNode"
                        @node-click="handleNodeClick"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :default-expanded-keys="defaultExpandedKeys"
                        :current-node-key="curreenttid"
                        highlight-current
                        node-key="primaryKeyId"
                        ref="tree"
                        ></el-tree>
                    </el-scrollbar>
                    </div>
                </el-card>
                </div>
        </el-col>
      <template v-if="!isShowDetail">
          <el-col :span="18" class="h-100" v-if="isShowList">
            <div class="h-100 rule-box-all">
               
                <el-card class="box-card  h-100">
                <div slot="header" class="clearfix">
                 
                      <el-link type="primary" @click="goBackFirst">   
                        <i class="el-icon-arrow-left" style="margin-right: 5px; "></i>
                        <span>退出</span>
                  </el-link>
                        <div style="float: right;">
                            <el-button
                            :disabled="!treeId"
                            icon="el-icon-plus"
                            size="small"
                            style="background-color:#2550A2;color:white;font-weight:bold;"
                            plain
                            @click="addRule"
                            >新增
                            </el-button>
                            <el-button
                             :disabled="!treeId"
                            icon="el-icon-document-copy"
                            size="small"
                            style="background-color:#FFA042;color:white;font-weight:bold;"
                            plain
                            @click="manageFolder"
                            >管理
                            </el-button>
                            
                         
                        </div>
                </div>
                <div v-if="ruleItemOptions.length>0">
                  <div class="rule-box" v-loading="ruleLoading">
                      <div class="rule-box-item" v-for="(item,index) in ruleItemOptions" :key="index" @click="ruleDetailClick(item)" >
                          <div class="rule-box-item-icon">
                            <i class="el-icon-folder" style=" cursor: pointer; font-size: 48px;color:orange"></i>
                          </div>
                          <div class="rule-box-item-title">{{ item.name }}</div>
                      </div>
                      
                  </div>
                  
                  <el-pagination
                  style="margin-top: 30px;text-align: center;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :total="total"
                        
                        layout="prev, pager, next,total,jumper"
                        class="pagination"
                      >
                  </el-pagination>

                </div>
                <el-empty description="暂无数据" v-else class="empty-container"></el-empty>
                </el-card>
            </div>
        </el-col>
         <el-col :span="18" class="h-100" v-if="!isShowList">
            <div class="h-100 rule-box-all">
               
                <el-card class="box-card  h-100">
                <div slot="header" class="clearfix">
                  <el-link type="primary" @click="goBack">
                    <i class="el-icon-arrow-left" style="margin-right: 5px;"></i>
                    <span >返回上一级</span>
                  </el-link>
                        <div style="float: right;">
                            <el-button
                           
                            icon="el-icon-plus"
                            size="small"
                            style="background-color:#2550A2;color:white;font-weight:bold;"
                            plain
                            @click="addFile"
                            >新增
                            </el-button>
                            <el-button
                            
                            icon="el-icon-document-copy"
                            size="small"
                            style="background-color:#FFA042;color:white;font-weight:bold;"
                            plain
                            @click="manageFolder"
                            >管理
                            </el-button>
                            
                         
                        </div>
                </div>
                <div class="rule-box" v-loading="ruleItemOptionsDetailLoading" v-if="ruleItemOptionsDetail.length>0">
                    <div class="rule-box-item" v-for="item in ruleItemOptionsDetail" :key="item.id" @click="ruleDetailClick1(item)">
                        <div class="rule-box-item-icon">
                          <i class="el-icon-tickets" style=" cursor: pointer; font-size: 48px;color:#2550A2"></i>
                        </div>
                        <div class="rule-box-item-title">{{ item.name }}</div>
                    </div>
                    
                </div>
                 <el-empty description="暂无数据" v-else class="empty-container"></el-empty>
                <el-pagination
                    style="margin-top: 30px;text-align: center;"
                      @size-change="handleSizeChange1"
                      @current-change="handleCurrentChange1"
                      :current-page="currentPage1"
                      :page-size="pageSize1"
                      :total="total1"
                      layout="prev, pager, next,total,jumper"
                      class="pagination"
                    
                    >
                    </el-pagination>
                </el-card>
            </div>
        </el-col>
      </template>
        <el-col :span="18" class="h-100" v-if="isShowDetail">
             
            <el-card class="box-card  h-100" v-if="isShowYpList">
                <div slot="header" class="clearfix">
                
                    <el-link type="primary" @click="goBack1">
                    <i class="el-icon-arrow-left" style="margin-right: 5px;"></i>
                    <span >返回上一级</span>
                  </el-link>
                </div>
                <div class="box-card-title">
                {{ ruleDataDetail.name }}
                </div>
                <div class="box-card-content1">
                    <div  class="box-card-content1-left">
                      <div class="box-card-content1-left-item">
                        下达日期：{{ ruleDataDetail.issueDate }}
                      </div>
                      <div class="box-card-content1-left-item">
                        实施日期：{{ ruleDataDetail.actualizeDate }}
                      </div>
                      <div>
                      <i class="el-icon-document"></i>

                      <el-link v-for="item in ruleDataDetail.standardFiles" :key="item.id" type="primary" :href="item.standardFileUrl"  style="margin-right: 5px;">{{ item.fileName }}</el-link>
                      

                      </div>
                    </div>
                    <div  class="box-card-content1-right">
                        <el-button type="danger" size="small" @click="previewRes">效果预览</el-button>
                        <el-button type="warning" size="small" @click="refreshRule" :loading="refreshLoad">规范更新</el-button>
                    </div>
                </div>
                <div class="box-card-content2">
                  <div class="box-card-content2-top">
                    <div class="box-card-content2-title">
                     <div class="title-container">
                      <span>样品信息</span>
                      <i class="el-icon-circle-plus" @click="addYp"></i>
                    </div>
                    </div>
                    <div class="box-card-content2-list">
                      <div class="box-card-content2-list-item" v-for="(item, index) in ypList" :key="index">
                        <div class="box-card-content2-list-item-title">
                           <span class="eg">if()</span>
                          <span>{{ item.name }}</span>
                        </div>
                        <div class="box-card-content2-list-item-list">
                                <span class="basic-info">基础信息</span>
                                <div class="box-card-content2-list-item-list-basic">
                                    <div class="basic-item-info" v-for="(item1,index1) in item.info":key="index1" >
                                      {{ item1.name }}
                                    </div>
                                    <div class="operation-icons">
                                      <i class="el-icon-edit" @click.stop="handleEdit(item, index)"></i>
                                      <i class="el-icon-delete" @click.stop="handleDelete(item,index)"></i>
                                    </div>
                                </div>
                        </div>

                      </div>

                    </div>
                  </div>
                  <div class="box-card-content2-top">
                    <div class="box-card-content2-title">
                      <div class="title-container">
                        <span>技术指标</span>
                        <i class="el-icon-circle-plus" @click="addJs"></i>
                      </div>
                    </div>
                    <div class="box-card-content2-list">
                      <div class="box-card-content2-list-item" v-for="(item, index) in jsList" :key="index">
                        <div class="box-card-content2-list-item-title">
                           <span class="eg">else()</span>
                          <span>{{ item.name }}</span>
                        </div>
                        <div class="box-card-content2-list-item-list">
                                <span class="basic-info">内容</span>
                                <div class="box-card-content2-list-item-list-basic">
                                    <div class="basic-item-info" v-for="(item1,index1) in item.info":key="index1" >
                                      {{ item1.symbolName }}
                                    </div>
                                    <div class="operation-icons">
                                      <i class="el-icon-edit" @click.stop="handleEditJs1(item, index)"></i>
                                      <i class="el-icon-delete" @click.stop="handleDelete1(item,index)"></i>
                                    </div>
                                </div>
                        </div>

                      </div>

                    </div>
                  </div>
                  
                </div>
           
                </el-card>
              <el-card class="box-card  h-100" v-if="!isShowYpList&&!isShowJsList">
                <template >
                  <div slot="header" class="clearfix" >
                   <el-link type="primary"  @click="showYpList">
                       <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" ></i>
                      <span  >退出</span>
                    </el-link>
                </div>
                <div class="add-yp-title">
                  <span>{{ isEditYp?'编辑':'新增' }}</span>
                </div>
                <div class="add-yp-detail">
                  <el-form label-position="left" label-width="80px" :model="ypDetail"  :rules="ypRuleForm" ref="ypFormRef">
                    <el-form-item label="样品信息" prop="name">
                      <el-input v-model="ypDetail.name"></el-input>
                    </el-form-item>
                    <el-form-item label="基础信息">
                      <div class="input-with-icon"  v-for="(item, index) in ypDetail.info" :key="index">
                        <el-input v-model="item.name"></el-input>
                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo(index)" ></i>
                        <i class="el-icon-remove-outline" @click="removeBasicInfo(item,index)"  v-if="index!==0"></i>
                      </div>
                    </el-form-item>
                    
                  </el-form>
                </div>
                <div class="add-yp-footer">
                   <el-button type="primary" @click="saveYpForm" :loading="saveYpLoad">保存</el-button>
                </div>
                </template>
    
            </el-card>
            <el-card v-if="isShowJsList&&!isShowYpList">
              <div slot="header" class="clearfix" >
                    <el-link type="primary"  @click="showYpList">
                      <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" ></i>
                      <span >退出</span>
                    </el-link>
                </div>
                <div class="add-yp-title">
                  <span>{{ isEditJs?'编辑':'新增' }}</span>
                  <div>
                     <el-button  size="small" style="background: rgb(168, 86, 248);color: white;" icon="el-icon-office-building" @click="conditionsSet">条件设置</el-button>
                         <el-button  size="small" style="background:rgb(37, 80, 162);;color: white;" icon="el-icon-connection" @click="linkEle">关联元素</el-button>
                  </div>
                </div>
                <div class="add-yp-detail">
                  <el-form label-position="left" label-width="80px" :model="jsDetail"  :rules="jsRuleForm" ref="jsFormRef">
                    <el-form-item label="检测项" prop="name">
                      <el-input v-model="jsDetail.name"></el-input>
                    </el-form-item>
                    <el-form-item label="技术指标" prop="info">
                      <div class="input-with-icon"  v-for="(item, index) in jsDetail.info" :key="index">
                        <el-input placeholder="请输入内容" v-model="item.name" class="input-with-select">
                          <el-select v-model="item.symbol" slot="prepend" placeholder="请选择符号" style="width: 150px;">
                            <el-option  v-for="(item1,index) in fqOptions" :key="index" :label="item1.dictKey" :value="item1.dictKey"></el-option>
                          </el-select>
                          
                        </el-input>
                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo1(index)"  ></i>
                        <i class="el-icon-remove-outline" @click="removeBasicInfo1(item,index)" v-if="index!==0"></i>
                      </div>
                    </el-form-item>
                    
                  </el-form>
                </div>
                <div class="add-yp-footer">
                   <el-button type="primary" @click="addJsForm" :loading="addJsFormLoad">保存</el-button>
                </div>
            </el-card>
              
         </el-col>
    </el-row>
    <!-- 新增文件夹 -->
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="30%"
      append-to-body

      >
      <div class="input-container">
        <span>规范文件夹名称</span>
        <el-input v-model="titleInput" placeholder="请输入内容" style="width: 300px;"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSaveFileClick" :loading="addSaveFileLoad">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 管理规范 -->
     <el-dialog title="管理" :visible.sync="manageVisible" width="50%" append-to-body>
        <el-table :data="manageData" border   height="550">
          <el-table-column property="name" label="规范名称" >
            <template slot-scope="scope">
              
              <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
            </template>

          </el-table-column>
          <el-table-column property="name" label="文件名称" v-if="!isShowList" >
            <template slot-scope="scope">
              <div  style="display: flex; ">
                <el-input v-model="scope.row.standardFile.fileName" placeholder="请输入内容"></el-input>
              
                    <el-button
                      type="text"
                      size="small"
                      style="color: rgb(219, 55, 55);"
                      @click="delFile(scope.row,scope.$index )"
                    >
                  <i class="el-icon-delete"></i> 
                </el-button>
              </div>
            </template>

          </el-table-column>
          
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
        
       
           
             <div style="display: flex; ">
              <el-upload
                v-if="!isShowList"
                class="upload-demo"
                action="#"
                :on-change="file => handleFileUpload(file, scope.row, scope.$index)"
               
                :show-file-list="false"
                :auto-upload="false"
                accept=".pdf, application/pdf"
              >
                <el-button size="small" type="text" style="margin-right: 5px;">上传文件</el-button>
              </el-upload>
              <el-button type="text" size="small" style="color: rgb(219, 55, 55);" @click="delManange(scope.$index, scope.row)">删除</el-button>
            </div>
            </template>

          </el-table-column>
         
        </el-table>
          <div slot="footer" class="dialog-footer">
          <el-button @click="manageVisible = false">取 消</el-button>
          <el-button type="primary" @click="manageSave" :loading="manageLoad">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 新增规范文件 -->
       <el-dialog title="新增" :visible.sync="addFileDialogVisible"  append-to-body width="30%" @close="closeAddFile">
        <el-form :model="fileForm" label-position="left" label-width="80px" :rules="fileRuleForm" ref="fileFormRef">
          <el-form-item label="规范名称" prop="name" >
            <el-input v-model="fileForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="下达日期" prop="issueDate">
            <el-date-picker
            style="width: 100%;"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="fileForm.issueDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="实施日期"  prop="actualizeDate">
            <el-date-picker
               format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            style="width: 100%;"
              v-model="fileForm.actualizeDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="规范文件" >
            <el-upload
              :auto-upload="false"
              multiple
              class="upload-demo"
              action="#"
              :file-list="fileForm.standardFileUrl"
              :on-change="uploadImportData"
           
               accept=".pdf, application/pdf"
             :on-exceed="handleExceed"
             :on-remove="handleFileRemove"
             
             :limit="1"
              >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">允许文件格式.pdf</div>
            </el-upload>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFileDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFileRoleForm" :loading="addFileRuleLoad">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 条件设置 -->
        <ConditionsSet ref="conditionsSetRef" @confirm="handleConditionsConfirm" />
        <!-- 关联元素 -->
        <LinkEle ref="linkEleRef" @confirm="confirmLinkEle" />
        <!-- 效果预览 -->
          <PreviewResult ref="previewResultRef" :ypList="ypList"/>
   </div>
</template>
<script>
import {getLazytree} from "@/api/manager/wbsprivate";
import ConditionsSet from './ConditionsSet.vue'
import LinkEle from "./LinkEle.vue";
import PreviewResult from './PreviewResult.vue'
import {getPage,edit,add,deleteItem,getById, addInfo,editInfo,getInfoPage,deleteItemInfo,updateTypeByTwo,standardUpdate } from "@/api/ruleManage/fileRule.js";
import { getStore, setStore } from "@/util/store";
 import { getDictionary } from "@/api/system/dict";
  export default {
  components: {
    ConditionsSet,
    LinkEle,
    PreviewResult
  },
    data() {
      return {
        id: '',
        parentId: '',
        tenant_id:'',
        projectid:'',
        treeId: '',
        treePid: '',

        defaultProps: {
            children: "children",
            label: "title",
            isLeaf: function (data) {
            return !data.hasChildren || (data.isExistForm==1);
            },
        },
        defaultExpandedKeys: [],
        curreenttid: '',
         expandName: this.$route.fullPath,
        ruleItemOptions:[
          
         
   
        ],
        total: 0,
        ruleLoading: false,
        addDialogVisible:false,
        saveBatchLoading: false,

        addSaveFileLoad:false,
        titleInput:'',
        isShowList:true,
        ruleItemOptionsDetail:[],
        ruleItemOptionsDetailLoading: false,
        currentPage: 1,
        pageSize: 35, // 8列 * 5行 = 40
        total: 0,
        currentPage1: 1,
        ruleItem: {},
        ruleItemDetail: {},
        pageSize1: 35, // 8列 * 5行 = 40
        total1: 0,

        isShowYpList:true,
        isShowDetail:false,
        ruleDataDetail: {},
        ypDetail: {
          name: '',
          info: [{ name: '' }]
        },
        saveYpLoad: false,
        ypRuleForm: {
          name: [
            { required: true, message: '请输入样品名称', trigger: 'blur' }
          ],
        
        },
        manageVisible: false,
        manageData: [],
        manageLoad: false,
        addFileDialogVisible:false,
        addFileRuleLoad:false,
        fileForm:{
          standardFileUrl: [], // 用于展示的文件列表
          files: [] // 存储实际的文件对象
        },
        fileRuleForm:{
          name: [
            { required: true, message: '请输入规范名称', trigger: 'blur' }
          ],
          issueDate: [
            { required: true, message: '请输入下达日期', trigger: 'blur' }
          ],
          actualizeDate: [
            { required: true, message: '请输入实施日期', trigger: 'blur' }
          ],
        },
        ypList:[
          {id:1,name:'样品名称',
          info:
          [{}]
          },  
        ],
        jsList:[
          {id:1,name:'技术指标名称',
          info:
          []
          },  
        ],
        isShowJsList:false,
        isEditYp: false,
        isEditJs: false,

        jsDetail: {
          name: '',
          info: [{ name: '',symbol:'' }, ]
        },
        addJsFormLoad: false,
        jsRuleForm: {
          name: [
            { required: true, message: '请输入技术指标名称', trigger: 'blur' }
          ],
           info: {
    validator: (rule, value, callback) => {
      if (!value || !value.every(item => item.symbol)) {
        callback(new Error('每一项技术指标都必须选择符号'));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }
        },
        fqOptions: [
        ],
        conditionsSetVisible:false,//条件设置弹窗是否显示
        isUploadVisible:false,//上传文件弹窗是否显示
        delIds:[],
        delFileIds:[],
        refreshLoad:false

       
      };
    },

    created(){
      console.log(111111111111);
      
        this.getFqOptions()
        const { id, tenant_id,projectid} = this.$route.query;
        this.id = id;
        this.parentId = 0;
        this.tenant_id = tenant_id;
        this.projectid = projectid;
        this.defaultExpandedKeys = getStore({ name: this.expandName });
        this.curreenttid= getStore({ name:'curreenttid' });
        this.treePid = getStore({ name:'treePid' });
        console.log(this.curreenttid,'this.curreenttid');
        
        if (this.curreenttid) {
          this.treeId = this.curreenttid;
          this.getRuleItemOptions();
        } 
    },
    beforeRouteLeave(to, from, next) {

      
       this.curreenttid=''
        setStore({
          name: 'curreenttid',
          content: this.curreenttid,
          type: true, // sessionStorage
        });
      next();
    },
   

    methods: {
      //获取符号字典
      getFqOptions(){
            getDictionary({
                    code: "u_standard_symbol",
                }).then((res) => {
                    this.fqOptions = res.data.data;
                });
      },
      //获取规范文件夹数据
      getRuleItemOptions() {
        this.ruleLoading = true;
        getPage({
          privateId:this.treeId,
          current:this.currentPage,
          size:this.pageSize,
          type: 1,
        }).then((res) => {
           this.ruleLoading = false;
          if (res.data.code === 200) {
            this.ruleItemOptions = res.data.data.records;
            this.total = res.data.data.total;
        
            
          } else {
             this.ruleItemOptions=[]
             this.total = 0;
            this.$message.error(res.data.msg);
          }
        });
      },

      handleNodeClick(data,node) {
       this.currentPage = 1;
       this.currentPage1 = 1;
   
        this.treeId = data.primaryKeyId;
        this.treePid = data.id;
        
        this.getRuleItemOptions()
          //获取节点展开路径
        this.getExpandedKeys(node);
        setStore({
          name: 'curreenttid',
          content: data.primaryKeyId,
          type: true, //sessionStorage
        });
        setStore({
          name: 'treePid',
          content: data.id,
          type: true, //sessionStorage
        });
          this.isShowList = true;
          this.isShowDetail=false
      },
     getExpandedKeys(node) {
      let expandedKeys = [];
      while (node.parent) {
        expandedKeys.push(node.data.primaryKeyId);
        node = node.parent;
      }
      setStore({
        name: this.expandName,
        content: expandedKeys,
        type: true,
      });

    },
      loadNode(node, resolve) {
                let pid = 0;
                if (node.level != 0) {
                    pid = node.data.id;
                }
                getLazytree(this.id, pid, this.tenant_id, this.projectid, {
                    wbsType: 2,
                }).then((res) => {
                    let arr = [];
                    if (Array.isArray(res.data.data)) {
                    arr = res.data.data;
                    }

                    return resolve(arr);
                });
        },
        goBackFirst() {
                this.isShowList = true;
                this.$router.go(-1);
         },
        
        goBack() {
                this.isShowList = true;
         },
         goBack1() {
          
          this.isShowDetail = false;
           this.getRuleDetail(this.ruleItem)

         },
         addRule(){
          this.titleInput = '';
          this.manageLoad=false
          this.addDialogVisible = true;
         },
         addSaveFileClick() {
          this.addSaveFileLoad = true;
          if (!this.titleInput) {
            this.$message.error('请输入规范文件夹名称');
            this.addSaveFileLoad = false;
            return;
          }

           const formData = new FormData();
          // 添加基本信息
          let objData={
              name: this.titleInput,
              type:1,
              privateId: this.treeId,
          }
         
          formData.append('data', new Blob([JSON.stringify(objData)], {
              type: 'application/json'
            }));
           add(
            formData
            ).then((res) => {
              this.addSaveFileLoad = false;
            if(res.data.code==200){
                this.$message.success(res.data.msg)
              
                this.addDialogVisible=false
                this.getRuleItemOptions();
            }else{
                this.$message.error(res.data.msg)
            }
            }).finally(() => {
                this.saveBatchLoading = false;
            });

         },
         ruleDetailClick(item){
          this.isShowList = false;
          this.getRuleDetail(item);
          this.ruleItem=item
         },
          //点击规范文件夹详情
          getRuleDetail(item) {
            this.ruleItemOptionsDetailLoading = true;
            getPage({
              current: this.currentPage1,
              size: this.pageSize1,
              type: 2,
              parentId: item.id,
              privateId: this.treeId,
            }).then((res) => {

              
              this.ruleItemOptionsDetailLoading = false;
              if (res.data.code === 200) {
                this.ruleItemOptionsDetail = res.data.data.records;
                this.total1 = res.data.data.total;
            
              } else {
                this.$message.error(res.msg);
                this.total1 = 0;


              }
            });
          },
          //


         ruleDetailClick1(item){
            this.getRuleDataDetail(item);
            this.getRuleDataDetail1(item);
            this.ruleItemDetail=item

          this.isShowDetail = true;
         },
         //获取规范数据详情
         getRuleDataDetail(item){
            getById({
              id: item.id,
            
            }).then((res) => {
              if (res.data.code === 200) {
                this.ruleDataDetail = res.data.data;
                console.log( this.ruleDataDetail,' this.ruleDataDetail');
                
              } else {
                this.$message.error(res.data.msg);
              }
            });
         },
         //获取规范数据详情
         getRuleDataDetail1(item,type){
             getInfoPage({
                current:1,
                size:100,
                type, 
                standardId: item.id,
              }).then((res) => {
                this.ruleLoading = false;
                if (res.data.code === 200) {
            
                  // 
                  if(type===1){
                    this.ypList = res.data.data.records;
                  }else if(type===2){
                    this.jsList = res.data.data.records;
                  }else{
                     const records = res.data.data.records;
                     // 根据 type 分类数据
                    this.ypList = records.filter(record => record.type === 1);
                    this.jsList = records.filter(record => record.type === 2);
                  }
                } else {
                 this.ypList = [];
                    this.jsList = [];
                  this.$message.error(res.data.msg);
                }
              });
         },
         addFile(){
         //新增规范文件
         this.addFileDialogVisible = true;
         },
      
     uploadImportData(file,fileList) {
       
        // 检查文件类型
        const isPDF = file.raw.type === 'application/pdf';
        const isCorrectExtension = file.raw.name.endsWith('.pdf');
        
        if (!isPDF || !isCorrectExtension) {
          this.$message.error('只能上传PDF文件！');
          const filteredList = fileList.filter((f) => f.raw.type === "application/pdf" && f.name.endsWith(".pdf"));
          this.fileForm.standardFileUrl = filteredList;
           return false;  ; // 阻止后续处理
        }

          // 将文件对象存入 files 数组
          if (!this.fileForm.files) {
            this.fileForm.files = [];
          }
          this.fileForm.files.push(file.raw);

          // 更新显示的文件列表
          this.fileForm.standardFileUrl = this.fileForm.files.map(file => ({
            name: file.name,
          }));
      },
      handleFileRemove(file, fileList) {

        
        // return this.$confirm(`确定移除 ${file.name}？`);
        const index = this.fileForm.standardFileUrl.findIndex(f => f.name === file.name);
        console.log(index,'index');
        
        if (index !== -1) {
          this.fileForm.standardFileUrl.splice(index, 1); // 从数组中移除文件
          this.fileForm.files.splice(index, 1); // 从文件数组中移除文件
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制只能上传一个文件，您已选择了 ${files.length + fileList.length} 个文件，请重新选择！`);
      },
        async addFileRoleForm(){
          const isValid = await this.$refs.fileFormRef.validate()
          if (!isValid) {
            this.$message.error('请填写完整的规范信息');
            return;
          }
          const formData = new FormData();
          // 添加基本信息
          let objData={
            name: this.fileForm.name,
            issueDate: this.fileForm.issueDate,
            actualizeDate: this.fileForm.actualizeDate,
            type: 2,
            privateId: this.treeId,
            parentId: this.ruleItem.id,
          }
          let data = JSON.stringify(objData);
          formData.append('data', new Blob([JSON.stringify(objData)], {
              type: 'application/json'
            }));

        // 添加文件
        if (this.fileForm.files && this.fileForm.files.length > 0) {
          this.fileForm.files.forEach(file => {
            formData.append('files', file);
          });
        }
                // add({
          //   ...this.fileForm,
          //   type: 2,
          //   privateId: this.treeId,
          //   parentId: this.ruleItem.id,
          // })
          console.log(formData,'formData');
          this.addFileRuleLoad=true
           add(formData)
          .then((res) => {
             this.addFileRuleLoad=false
            if(res.data.code==200){
                this.$message.success(res.data.msg)
              
                this.addFileDialogVisible=false
                this.getRuleDetail(this.ruleItem);
            }else{
                this.$message.error(res.data.msg)
            }
            }).finally(() => {
                this.addFileRuleLoad = false;
            });
          
          
          

         },
      closeAddFile(){
        this.addFileDialogVisible=false
        this.fileForm={
          
        }
      

      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getRuleItemOptions(); // 刷新数据
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
         this.getRuleItemOptions(); // 刷新数据
      },
      handleCurrentChange1(val) {
        this.currentPage1 = val
         this.getRuleDetail(this.ruleItem);
      },
      handleSizeChange1(val) {
        this.pageSize1 = val
        this.currentPage1= 1
        this.getRuleDetail(this.ruleItem); // 刷新数据
      },
      addYp(){
        this.isShowYpList = false;
        this.isShowJsList = false;
        this.isEditYp = false;
        this.ypDetail = {
          name: '',
          info: [{ name: '' }]
        };



      },
      showYpList() {
        this.isShowYpList = true;
      },
       // 添加基础信息行
    addBasicInfo(index) {
      this.ypDetail.info.splice(index + 1, 0, { name: '' });
    },

    // 删除基础信息行
    removeBasicInfo(item,index) {
     if(item.id==''){
        this.ypDetail.info.splice(index, 1);
     }else{
        this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
         
            deleteItemInfo({id:item.id}).then((res) => {
              if(res.data.code==200){
                this.$message.success(res.data.msg);
                this.getRuleDataDetail(this.ruleItemDetail);
                this.getRuleDataDetail1(this.ruleItemDetail,1);
                    this.ypDetail.info.splice(index, 1);
              }else{
                this.$message.error(res.data.msg);
              }
            });
          }).catch(() => {
            this.$message.info('已取消删除');
          })
     }

    },
  async  saveYpForm(){
        const isValid = await this.$refs.ypFormRef.validate()
        if (!isValid) {
          this.$message.error('请填写完整的样品信息');
          return;
        }
        this.saveYpLoad = true;
        this.ypDetail.info.forEach((item)=>{
          item.type=1
        })
        if(!this.isEditYp){
               addInfo({
          ...this.ypDetail,
            type: 1,
            standardId: this.ruleItemDetail.id,
            // parentId: this.ruleItemDetail.id,
          }).then((res) => {
            if(res.data.code==200){
                this.$message.success(res.data.msg)
                 this.getRuleDataDetail(this.ruleItemDetail);
                  this.getRuleDataDetail1(this.ruleItemDetail,1);
                 this.isShowYpList= true;
                 this.isShowJsList=true
            }else{
                this.$message.error(res.data.msg)
            }
            }).finally(() => {
                this.saveYpLoad = false;
            });
        }else{
                 editInfo({
                  ...this.ypDetail,
                    type: 1,
                    standardId: this.ruleItemDetail.id,
                    // parentId: this.ruleItemDetail.id,
                  }).then((res) => {
                    if(res.data.code==200){
                        this.$message.success(res.data.msg)
                        this.getRuleDataDetail(this.ruleItemDetail);
                          this.getRuleDataDetail1(this.ruleItemDetail,1);
                        this.isShowYpList= true;
                        this.isShowJsList=true
                    }else{
                        this.$message.error(res.data.msg)
                    }
                    }).finally(() => {
                        this.saveYpLoad = false;
                    });
        }
       
          

    },
    
    // 管理文件夹
    manageFolder(){
       this.delFileIds=[];
       this.delIds=[];
       

      this.manageVisible = true;
      if(!this.isShowList){
         this.manageData=JSON.parse(JSON.stringify(this.ruleItemOptionsDetail));
         this.manageData.forEach(item=>{
          item.filesCount=0;
          if(item.standardFile===null){
            item.standardFile=[];

          }
         })
      }else{
         this.manageData=JSON.parse(JSON.stringify(this.ruleItemOptions));
      }
     
    },
    delManange(index,row){
          console.log(this.isShowList,'isShowList');
    
          if(this.isShowList){
                   this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                //  this.manageData.splice(index, 1);
                  deleteItem({id:row.id}).then((res) => {
                    if(res.data.code==200){
                      this.$message.success(res.data.msg);
                      this.getRuleItemOptions();
                      this.manageData.splice(index, 1);
                    }else{
                      this.$message.error(res.data.msg);
                    }
                  });
                }).catch(() => {
                  this.$message.info('已取消删除');
                })
          }else{
      
           

            this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
           
               this.delIds.push(row.id)
              this.manageData.splice(index, 1);
              row.filesCount = 0; // 设置文件大小
                }).catch(() => {
                  this.$message.info('已取消删除');
                })

          }
    },
    putFile(item,index){

      this.isUploadVisible = true;
    },
    handleFileUpload(file,row,index) {
        const isPDF = file.raw.type === 'application/pdf';
        const isCorrectExtension = file.raw.name.endsWith('.pdf');
        
        if (!isPDF || !isCorrectExtension) {
          this.$message.error('只能上传PDF文件！');
          return false; // 阻止后续处理
        }
      
      if(!file) return
  
      row.file=file.raw; // 获取原始文件对象
      row.standardFile.fileName = file.name; // 设置文件名
      row.filesCount = 1; // 设置文件大小
      // 强制更新视图，确保文件上传按钮显示正确
      this.$nextTick(() => {
        this.manageData = [...this.manageData]; // 强制更新视图
      });


      // 在这里处理文件上传逻辑
    },


    delFile(row,id){
      console.log(row,'row');
      const {standardFile}=row;
    console.log(standardFile,'standardFile');
    if(standardFile&&standardFile.id){
      this.delFileIds.push(standardFile.id)
     

    }
    row.filesCount = 0; // 设置文件大小

     row.file=null; // 获取原始文件对象
      row.standardFile.fileName = ''; // 设置文件名
// 如果有文件ID，则执行删除操作


      
    },
    manageSave(){
      this.manageLoad = true;
 
  
      const arr = this.manageData.map(item => ({ id: item.id, name: item.name,type:this.isShowList?1:2 }));
      console.log(arr,'arr');
      if(this.isShowList){
               edit(arr ).then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.msg);
                  this.manageVisible = false;
                  if(!this.isShowList){
                    this.getRuleDetail(this.ruleItem);
                    this.manageData = JSON.parse(JSON.stringify(this.ruleItemOptionsDetail));
                  }else{
                    this.getRuleItemOptions();
                      this.manageData = JSON.parse(JSON.stringify(this.ruleItemOptions));
                  }
                } else {
                  this.$message.error(res.data.msg);
                }
              }).finally(() => {
                this.manageLoad = false;
              });
        }else{
        let objData=this.manageData.map(item => ({ id: item.id, name: item.name,filesCount: item.filesCount,file:item.file }));
        let filesArr=this.manageData.map(item => item.file);
        const formData = new FormData();
       console.log(objData,'objData');
        let objData1=this.manageData.map(item => ({ id: item.id, name: item.name,filesCount: item.filesCount}));
        formData.append('data', new Blob([JSON.stringify(objData1)], {
              type: 'application/json'
        }))
        let ids=this.delIds
        formData.append('delIds', new Blob([JSON.stringify(ids)], {
              type: 'application/json'
        }))
        let delFileIds=this.delFileIds;
          formData.append('delFileIds', new Blob([JSON.stringify(delFileIds)], {
              type: 'application/json'
        }))
        console.log(filesArr,'filesArr');
        
        if(filesArr.length>0){
              for(let i=0;i<filesArr.length;i++){
                formData.append('files', filesArr[i]);
            }

        }
        console.log(formData,'formData');
        console.log(this.delFileIds,'this.delFileIds;');
           console.log(this.delIds,'this.delIds;');
        
          updateTypeByTwo(formData ).then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.msg);
                  this.manageVisible = false;
                  if(!this.isShowList){
                    this.getRuleDetail(this.ruleItem);
                    this.manageData = JSON.parse(JSON.stringify(this.ruleItemOptionsDetail));
                  }else{
                    this.getRuleItemOptions();
                      this.manageData = JSON.parse(JSON.stringify(this.ruleItemOptions));
                  }
                } else {
                  this.$message.error(res.data.msg);
                }
              }).finally(() => {
                this.manageLoad = false;
              });

      }
 
    },
      handleEdit(item, index) {
  
        this.isShowYpList = false;
        this.isShowJsList = false;
        this.ypDetail = JSON.parse(JSON.stringify(item));
        this.isEditYp = true;
      },

      handleDelete(item,index) {
        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.ypList.splice(index, 1);
          deleteItemInfo({ id: item.id }).then((res) => {
            if(res.data.code==200){
                this.$message.success(res.data.msg)
                 this.getRuleDataDetail(this.ruleItemDetail);
                  this.getRuleDataDetail1(this.ruleItemDetail,1);
            }else{
                this.$message.error(res.data.msg)
            }
          });
         
        }).catch(() => {});
      },
  

      handleDelete1(item,index) {
        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.jsList.splice(index, 1);
       deleteItemInfo({ id: item.id }).then((res) => {
            if(res.data.code==200){
                this.$message.success(res.data.msg)
                 this.getRuleDataDetail(this.ruleItemDetail);
                  this.getRuleDataDetail1(this.ruleItemDetail,2);
            }else{
                this.$message.error(res.data.msg)
            }
          });
       
        }).catch(() => {});
      },
      //新增技术指标
      addJs(){
        this.isShowJsList = true;
         this.isShowYpList = false;
        this.isEditJs = false;
        this.jsDetail = {
          name: '',
          info: [{ name: '',select:'' }]
        };
        
      },
      handleEditJs1(item, index) {
        // 处理编辑逻辑
        this.jsDetail = JSON.parse(JSON.stringify(item));
        console.log(        this.jsDetail,'        this.jsDetail');
        
        this.isEditJs = true;
          this.isShowJsList = true;
         this.isShowYpList = false;
      },
      addBasicInfo1(index) {
       this.jsDetail.info.splice(index + 1, 0, { name: '', select: '' });
      },
     async addJsForm() {
        const isValid = await this.$refs.jsFormRef.validate();

        
        if (!isValid) {
          this.$message.error('请填写完整的技术指标信息，并确保每一项都选择了符号');
          return;
        }
        this.addJsFormLoad = true;
        this.jsDetail.info.forEach((item)=>{
          item.type=2
        })
        if(!this.isEditJs){
             addInfo({
          ...this.jsDetail,
          type: 2,
          standardId: this.ruleItemDetail.id,
        }).then((res) => {
          if(res.data.code==200){
              this.$message.success(res.data.msg)
              this.getRuleDataDetail(this.ruleItemDetail);
              this.getRuleDataDetail1(this.ruleItemDetail,2);
              this.isShowYpList= true;
              this.isShowJsList=false
               
          }else{
              this.$message.error(res.data.msg)
          }
          }).finally(() => {
              this.addJsFormLoad = false;
          });
        }else{
           editInfo({
          ...this.jsDetail,
          type: 2,
          standardId: this.ruleItemDetail.id,
        }).then((res) => {
          if(res.data.code==200){
              this.$message.success(res.data.msg)
              this.getRuleDataDetail(this.ruleItemDetail);
              this.getRuleDataDetail1(this.ruleItemDetail,2);
              this.isShowYpList= true;
              this.isShowJsList=false
               
          }else{
              this.$message.error(res.data.msg)
          }
          }).finally(() => {
              this.addJsFormLoad = false;
          });
        }
          //新增技术指标
          
       
      },
    
    // 删除基础信息行
    removeBasicInfo1(item,index) {

       if(item.id==''){
        this.jsDetail.info.splice(index, 1);
     }else{
        this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
         
            deleteItemInfo({id:item.id}).then((res) => {
              if(res.data.code==200){
                this.$message.success(res.data.msg);
                      this.jsDetail.info.splice(index, 1);
                this.getRuleDataDetail(this.ruleItemDetail);
                this.getRuleDataDetail1(this.ruleItemDetail,1);
                    this.ypDetail.info.splice(index, 2);
              }else{
                this.$message.error(res.data.msg);
              }
            });
          }).catch(() => {
            this.$message.info('已取消删除');
          })
     }
    },
    //条件设置
    conditionsSet(){
    
      
        if(!this.jsDetail.id){
          this.$message.error('请先保存技术指标信息');
          return;
        }
      if(this.jsDetail.info[0].name === '') {
        this.$message.error('请先添加技术指标内容');
        return;
      }
      this.$refs.conditionsSetRef.show(this.jsDetail.info,this.ruleItemDetail.id,this.jsDetail.id);

    },
    // 添加确认取消处理方法
    handleConditionsConfirm() {
      console.log('确认条件设置')
    },
    handleConditionsCancel() {
      console.log('取消条件设置') 
    },
    //关联元素
    linkEle() {
         if(!this.jsDetail.id){
          this.$message.error('请先保存技术指标信息');
          return;
        }
      if(this.jsDetail.info[0].name === '') {
        this.$message.error('请先添加技术指标内容');
        return;
      }
      console.log(this.treePid,'this.treePid)');
      
        this.$refs.linkEleRef.show(this.jsDetail.info, this.treeId,this.id,  this.projectid,this.ruleItemDetail.id,this.treePid,this.jsDetail.id);
    },
    confirmLinkEle() {
      console.log('确认关联元素')

    
    },
    //效果预览
    previewRes() {
      this.$refs.previewResultRef.show()
    },
    //更新
    refreshRule(){
      this.refreshLoad=true
         standardUpdate({
          id: this.ruleItemDetail.id,
     
        }).then((res) => {
  
          if(res.data.code==200){
              this.$message.success(res.data.msg)
           
             this.getRuleDataDetail({id:res.data.data});
            this.getRuleDataDetail1({id:res.data.data});
               
          }else{
              this.$message.error(res.data.msg)
          }
          }).finally(() => {
                      this.refreshLoad=false
          });
    }
  }
  }
</script>

<style scoped lang="scss">
.container-box {
  height: calc(100vh - 120px);

  box-sizing: border-box;
}

.h-100 {
  height: 100%;
}
.tree-container {
  height: calc(100vh - 120px);
  overflow-y: auto;
}

.box-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  // 内容区域
  .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.rule-box{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: repeat(4, 1fr);
   gap: 50px;
  padding: 20px;
  height: 600px;
  overflow-y:hidden;

  .rule-box-item{
      text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rule-box-item-icon {
      margin-bottom: 8px;
 
  }
    .rule-box-item-title {
        // width: 100px; /* 设置一个固定的宽度，可以根据需要调整 */
      font-size: 14px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      // white-space: nowrap;
    }

}
.input-container {
  display: flex;
  align-items: center;
}

.input-container span {
  margin-right: 10px; /* 根据需要调整间距 */
}
.box-card-title{
  font-weight: bolder;
  font-size: 24px;
}
.box-card-content1{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .box-card-content1-left{
    display: flex;
    .box-card-content1-left-item{
      margin-right: 25px;
    }
    
  }
}
.box-card-content2{
  margin-top: 10px;
// border: 1px solid red;
height: calc(100vh - 270px);

  .box-card-content2-title{
    margin-top: 10px;
    color:  rgba(130, 130, 130, 1);
    font-size: 10px;;
    width: 98%;
    padding-left: 20px;
    font-size: 18px;
    line-height: 40px;
    background: rgb(240, 240, 240);
      .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;

    i {
      cursor: pointer;
      font-size: 22px;
      color: #2550A2;
      // 添加过渡效果
      &:hover {
        color: #409EFF;
      }
    }
  }
  }
}

.box-card-content2-bottom{
  margin-top: 20px;
}
.add-yp-title{
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  display: flex;
  justify-content: space-between;
 
}
.input-with-icon {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  .el-input {
    flex: 1;
  }
  
  i {
    margin-left: 10px;
    font-size: 20px;
    cursor: pointer;
    
    &.el-icon-circle-plus-outline {
      color: #409EFF;
      &:hover {
        color: #66b1ff;
      }
    }
    
    &.el-icon-remove-outline {
      color: #F56C6C;
      &:hover {
        color: #f78989;
      }
    }
  }
}
.add-yp-detail{
    flex: 1;
    overflow-y: auto;
   padding: 20px;
   height: calc(100vh - 342px); /* 减去标题和底部按钮的高度 */
}
// 新增底部按钮容器样式
.add-yp-footer {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  // 可选: 添加上边框
  border-top: 1px solid #EBEEF5;
}
.box-card-content2-top{
  display: flex;
  flex-direction: column;
  height: 50%;
  // border: 1px solid orangered;

}
.box-card-content2-list{
  margin-top: 20px;

  // height: 250px;
  overflow-y: auto;
  // border: 1px solid blue;

  
  .eg{
    color:rgba(37, 80, 162, 1);
    margin-right: 10px;
  }

  .box-card-content2-list-item{
    height: 80px;
    padding: 10px;
    border: 2px solid #EBEEF5;
    margin-bottom: 10px;


   
  }
  .box-card-content2-list-item-list{
    display: flex;
    margin-top: 20px;
    align-items: center;
    position: relative;
    .operation-icons {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 10px;

    i {
      cursor: pointer;
      font-size: 16px;

      &.el-icon-edit {
        color: #409EFF;
        &:hover {
          color: #66b1ff;
        }
      }
      
      &.el-icon-delete {
        color: #F56C6C;
        &:hover {
          color: #f78989;
        }
      }
    }
  }
    .basic-info{
      color: gray;
      font-size: 14px;
    }
    .box-card-content2-list-item-list-basic{
      display: flex;
      margin-left: 10px;
      width: 100%;
      overflow-x: auto;
      flex: 1;

      .basic-item-info{
        margin-right: 10px;
        margin-right: 20px; 
            flex-shrink: 0; // 防止项目被压缩

        
      }
    }
  }
}
.empty-container{
  height: 600px;
}
.dialog-footer{
  text-align: center;

}
</style>