elizebeth/src/xt_pages/data/components/editInspection.vue

<template>
    <el-dialog
        :title="formTitle"
        width="900px"
        :visible.sync="visible"
        :before-close="_close"
    >
        <div>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                <el-form-item label="组套名称 : " prop="project_team" style="width:100%">
                    <el-input v-model="form.project_team" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="组套价格 : " prop="price" style="width:100%">
                    <el-input v-model="form.price" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="拼音 : " prop="pinyin" style="width:50%">
                    <el-input v-model="form.pinyin" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="五笔 : " prop="wubi" style="width:50%">
                    <el-input v-model="form.wubi" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                
                <el-form-item label="试管颜色 : " prop="name" style="width:50%">
                     <el-select v-model="form.tube_color" style="width:160px;" placeholder="请选择">
                        <el-option
                         v-for="(item,index) in getDictionaryDataConfig('system','tube_color')"
                         :key="index"
                         :label="item.name"
                         :value="item.id">
                        </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="组套类型 : " prop="name" style="width:50%">
                    <el-select v-model="form.team_type" style="width:100%;" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注 : " prop="name" style="width:100%;">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>
                 <el-form-item label="组套明细" style="width:50%;">
                    <el-select v-model="form.project_detail" placeholder="请选择">
                        <el-option
                        v-for="item in projectList"
                        :key="item.id"
                        :label="item.project_name"
                        :value="item.id">
                        </el-option>
                    </el-select>

                    </el-form-item>
                 <el-form-item label="数量" style="width:50%;"> 
                      <div style="display:flex;"> 
                         <el-input v-model="form.number" style="margin-right:10px;"></el-input>
                         <el-button type="primary" @click="addProjectList">添加</el-button>
                      </div>
                  </el-form-item>
            </el-form>
            <el-form>
                <el-table :data="tableData" border  style="100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row ref="tab">
                    <el-table-column align="center" prop="name" label="分类" width="120">
                        <template slot-scope="scope">{{getId(scope.row.statistical_classification)}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="组套明细" width="120">
                        <template slot-scope="scope">{{scope.row.project_name}}</template>
                    </el-table-column>
                     <el-table-column align="center" prop="name" label="数量" width="120">
                        <template slot-scope="scope">{{scope.row.number}}</template>
                    </el-table-column>
                     <el-table-column align="center" prop="name" label="单位" width="120">
                        <template slot-scope="scope">{{scope.row.unit}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="单价" width="120">
                        <template slot-scope="scope">{{scope.row.price}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="操作">
                        <template slot-scope="scope">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="top"
                            >
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="small"
                                @click="DeleteProject(scope.row.id,scope.$index)"
                            ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>


        <div slot="footer" class="dialog-footer">
            <el-button @click="hide">取 消</el-button>
            <el-button type="primary"  @click="submitAction('form')">保 存</el-button>
        </div>
  </el-dialog>
</template>

<script>
import { getProjectTeamDetail,updatedProjectTeam,getAllProjectList,addProjectList,DeleteProject } from "@/api/project/project"
import { getDictionaryDataConfig,getDataConfig} from "@/utils/data";
export default {
    data(){
        return{
            visible:false,
            formTitle:'',
            activeName:'first',
            form:{
              id:"",
              project_team:'',
              price:"",
              pinyin:"",
              wubi:"",
              tube_color:"",
              team_type:"",
              remark:"",
              project_detail:"",
              number:"",
              item_id:"",
            },
            options: [{
            value: 1,
            label: '是'
            }, {
            value: 2,
            label: '否'
            },],
            value: '',
            radio:'1',
            rules: {
              project_team: [{ required: true, message: '请填写组套名称', trigger: 'blur'  }],
            //   pinyin: [{ required: true, message: '请填写拼音' , trigger: 'blur' }],
            //   wubi: [{ required: true, message: '请填写五笔' , trigger: 'blur' }],
              price: [{ required: true, message: '请填写价格', trigger: 'change' }],
              team_type: [{ required:true,message:'请填写组套类型',trigger:'change' }]
           },
           tableData:[],
           item_id:[]
        }
    },
    methods:{
         getDataConfig(module, filed_name){
            return getDataConfig(module, filed_name)
        },
            getDictionaryDataConfig(module, filed_name) {
            return getDictionaryDataConfig(module, filed_name)
        },
        _close: function(done) {
            done()
        },
        clear: function() {
            this.form.id = 0;
            this.form.name = "";
            this.form.intro = "";
        },
        show(id) {
         this.visible = true
         this.formTitle = '编辑'
         this.getProjectTeamDetail(id) 
        },
        hide() {
    
            this.visible = false
        },
        getProjectTeamDetail(id){
           getProjectTeamDetail(id).then(response=>{
              if(response.data.state == 1){
                 var projectTeamDetail =  response.data.data.projectTeamDetail
                 console.log("projectTeamDetail",projectTeamDetail)
                 var str  = projectTeamDetail.project_id
                 var arr = str.split(",")
                 console.log("Arr33333",arr)
                 var list = response.data.data.list
                 console.log("list",list)
                 var hisList = response.data.data.hisList
                 console.log("histList",hisList)
                 for(let i=0;i<list.length;i++){
                   for(let j=0;j<hisList.length;j++){
                       if(list[i].id == hisList[j].project_id){
                           list[i].number = hisList[j].number
                       }
                   }
                 }
                
                 var strArr = []
                 for(let i=0;i<arr.length;i++){
                   for(let j=0;j<list.length;j++){
                      if((arr[i]== list[j].id)){
                          strArr.push(list[j])
                      }
                   }
                 }
                 console.log("数据222222",strArr)
                 this.tableData = strArr
               
               
                 this.form.id = projectTeamDetail.id
                 this.form.project_team = projectTeamDetail.project_team
                 this.form.price = projectTeamDetail.price
                 this.form.pinyin = projectTeamDetail.pinyin
                 this.form.wubi  = projectTeamDetail.wubi
                 this.form.tube_color = projectTeamDetail.tube_color
                 this.form.team_type = projectTeamDetail.team_type
                 this.form.remark = projectTeamDetail.remark
                 this.form.item_id = projectTeamDetail.item_id
                //  console.log("project",projectTeamDetail)
              }
           }) 
        },
        submitAction(formName){
           this.$refs[formName].validate((valid)=>{
               var arr = []
                for(let i=0;i<this.tableData.length;i++){
                    arr.push(this.tableData[i].id)
                }
             
               var ids = arr.join(",")
               var item_id = this.form.item_id + "," + this.item_id.join(",") 
               console.log("item_id",item_id)
               
               if(valid){
                var params = {
                    id:this.form.id,
                    project_team:this.form.project_team,
                    price:this.form.price,
                    pinyin:this.form.pinyin,
                    wubi:this.form.wubi,
                    tube_color:this.form.tube_color,
                    team_type:this.form.team_type,
                    remark:this.form.remark,
                    ids:ids,
                    item_id:item_id
                }
                // console.log("params",params)
                 updatedProjectTeam(params).then(response=>{
                   if(response.data.state == 1){
                     var projectTeam = response.data.data.projectTeam
                     this.$message.success("保存成功")
                     this.visible = false
                     this.$parent.getlist()
                   }
                 })
              }
           })  
        
        },
       getlist(){
          getAllProjectList().then(response=>{
             if(response.data.state == 1){
               var projectList = response.data.data.projectList
               console.log('projectlist33333',projectList)
               this.projectList = projectList
               var hisprojectlist = response.data.data.hisprojectlist
             console.log("hisprojectlist",hisprojectlist)
            //    this.tableData = hisprojectlist
             }
          })   
        },
        getId(id){
          console.log("id",id)
          var name = ""
          var statistics_category =  getDictionaryDataConfig('system','statistics_category') 
          console.log("statics",statistics_category)
          for(let i=0;i<statistics_category.length;i++){
             if(id == statistics_category[i].id){
                 name = statistics_category[i].name
             }
          }
          return name
        },
       addProjectList(){
           
           console.log("表格",this.tableData)
            const params = {
              id:this.form.project_detail,
              number:parseInt(this.form.number)
            }
           console.log("params",params)
          addProjectList(params).then(response=>{
             if(response.data.state == 1){
               var projectList = response.data.data.projectList
               projectList.number = parseInt(this.form.number)
               this.tableData.push(projectList)
               console.log("23333",this.tableData)
               var item = response.data.data.item
               this.item_id.push(item.id)
               this.$message.success("保存成功")
               this.form.project_detail = ""
               this.form.number = ""
               this.getlist()
             }
          })
        },
        DeleteProject(id,index){

           this.$confirm("确认删除此项目吗?", "删除", {
            confirmButtonText: "确 定",
            cancelButtonText: "取 消",
            type: "warning"
         }).then(() => {
          DeleteProject(id).then(response => {
            if (response.data.state == 1) {
               this.tableData.splice(index, 1);
               
            } else {
             
            }
          });
        })
        .catch(() => {});
        }
    },
    created(){
       this.getlist()   
    }
}
</script>