elizebeth/src/xt_pages/data/components/addInspection.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="tube_color" 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="team_type" 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 { getDictionaryDataConfig,getDataConfig } from "@/utils/data";
import { saveProjectTeam,getAllProjectList,addProjectList,DeleteProject,getProjectDetail } from "@/api/project/project"
export default {
    data(){
        return{
            visible:false,
            formTitle:'',
            activeName:'first',
            form:{
              project_team:'',
              price:"",
              pinyin:"",
              wubi:"",
              tube_color:"",
              team_type:"",
              remark:"",
              project_detail:"",
              number:""
            },
            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:[],
           projectList:[],
           tabList:[],
        }
    },
    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 = '新增' 
         },
        hide() {
         this.visible = false
        },
        submitAction(formName){
           this.$refs[formName].validate((valid)=>{
                var arr = []
                for(let i=0;i<this.tableData.length;i++){
                    arr.push(this.tableData[i].id)
                }
                console.log("arr",arr)
                var ids = arr.join(",")
                var params = {
                 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,
               }
               console.log("params",params)
              saveProjectTeam(params).then(response=>{
                 if(response.data.state == 1){
                   var projectTeam = response.data.data.projectTeam
                   console.log("projectTeam",projectTeam)
                   this.$message.success("保存成功")  
                   this.visible = false
                   this.form.project_team = "",
                   this.form.price = "",
                   this.form.pinyin = "",
                   this.form.wubi = "",
                   this.form.tube_color = "",
                   this.form.team_type = "",
                   this.form.remark = ""
                   this.tableData = []
                   this.form.number = ""
                   this.$parent.getlist()
                 }else{
                    this.$message.error("项目组套名称已存在!")
                 }
              }) 
           })
        },
        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){
          var name = ""
          var statistics_category =  getDictionaryDataConfig('system','statistics_category') 
          console.log("2235",statistics_category)
          for(let i=0;i<statistics_category.length;i++){
             if(id == statistics_category[i].id){
                 name = statistics_category[i].name
             }
          }
          return name
        },
        chagneInspection(id){
           getProjectDetail(id).then(response=>{
              if(response.data.state == 1){
               var projectdetail = response.data.data.projecDetail
               console.log("projectdetail",projectdetail)
               this.tableData.push(projectdetail)
              }
           })
        },
       addProjectList(){
          for(let i=0;i<this.projectList.length;i++){
            if(this.form.project_detail == this.projectList[i].id){
                this.projectList[i].number = this.form.number
                this.tableData.push(this.projectList[i])
            }
         }
         console.log("33333",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
               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>