vue前端--查询+table表格+弹出框

•  查询

• 表格（不带分页）行内删除

• 新增/编辑 弹出框 

<template>
  <div id="body" class="body">
    <!--    查询-->
    <el-row id="searchDiv" style="margin: 10px 0 0 10px" type="flex" justify="left">
      <el-form :model="queryCondition" ref="queryCondition" label-width="auto" style="width:100%;">
        <el-col :span="6" >
          <el-form-item label="名称" prop="name">
            <el-input v-model="queryCondition.name" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态：" prop="status" >
            <el-select v-model="queryCondition.status" placeholder="请选择" clearable>
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker v-model="queryCondition.startTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button  type="primary" @click="loadList()">查询</el-button>
          <el-button  type="primary" @click="resetting()">重置</el-button>
          <el-button  type="success" @click="addDialog()">新增</el-button>
        </el-col>
      </el-form>
    </el-row>
    <!--    table-->
    <el-row style="margin: 10px 10px">
      <el-table :data="oilTableData" ref="oilTableData" :height="oilTableHeight" :stripe='true' border
                v-loading="isLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column label="序号" align="center" width="60" type="index" fixed="left">
          <template slot-scope="scope">
            <sapn>{{scope.$index + 1}}</sapn>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
          <template slot-scope="scope">
            <sapn>{{scope.row.name}}</sapn>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center">
          <template slot-scope="scope">
            <sapn>{{scope.row.startTime}}</sapn>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <sapn>{{scope.row.status === '1' ? '运行' : '停止'}}</sapn>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="editDialog(scope.row)">编辑</el-button>
            <el-button  type="text" size="small" @click="deleteTableData(scope.row)"><sapn style="color: red">{{'删除'}}</sapn></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--    diaLog-->
    <el-row>
      <el-dialog :title="this.diaFlag === 'add'? '新增':'编辑'" :visible.sync="oilDiaLogVisible" style="width:50%;margin: 0 auto;" center>
        <el-form :model="oilDiaLogForm" ref="oilDiaLogForm" :rules="oilDiaLogFormRules" label-width="auto">
          <el-col :span="24">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="oilDiaLogForm.name" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态：" prop="status" >
              <el-select v-model="oilDiaLogForm.status" placeholder="请选择" clearable>
                <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开始时间:" prop="startTime">
              <el-date-picker v-model="oilDiaLogForm.startTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" style="margin-top: 20px">
          <el-button type="primary" @click="submitDiaForm()">确定</el-button>
          <el-button @click="closeDiaLog()">返回</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "vueIndex",
  data(){
    return{
      queryCondition:{
        name:'',
        status:'',
        startTime:'',
      },
      statusList:[
        {id:'1',name:'运行'},
        {id:'2',name:'停止'},
      ],
      //
      oilTableData:[
        {name:'石兰',startTime:'2024-08-31',status:'1'},
        {name:'鄯兰',startTime:'2024-08-31',status:'2'},
      ],
      oilTableHeight:document.documentElement.clientHeight - 290,
      isLoading:false,
      selectedList:[],
      //
      diaFlag:false,
      oilDiaLogVisible:false,
      oilDiaLogForm:{},
      oilDiaLogFormRules:{
        name: [{required: true, message: "请输入！", trigger: "blur"},],
        status: [{required: true, message: "请输入！", trigger: "blur"},],
        startTime: [{required: true, message: "请输入！", trigger: "blur"},],
      },
    }
  },

  created() {

  },

  mounted(){

  },

  methods:{
    //table
    loadList(){
      this.isLoading = true;
      let obj = this.queryCondition;
      this.$post("/lanzhou/equipment/oilInBatch/stInList/selOilList", obj, (data) => {
        this.oilTableData = data.data;
        console.log("this.oilTableData",this.oilTableData);
      },()=>{
        this.isLoading = false;
      });
    },
    //重置
    resetting(){
      this.queryCondition = {};
      this.oilDiaLogVisible = false;
      this.loadList();
    },
    //单行删除
    deleteTableData(row){
      this.selectedList.push(row);
      if (this.selectedList.length > 0){
        this.$confirm("确定删除？", "删除提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: "warning",})
            .then(() => {
              let obj = this.selectedList;
              this.$post("/lanzhou/equipment/oilInBatch/stInList/delOilList", obj, (data) => {
                if(data.data === ""){
                  this.$message.success('删除成功！');
                }
                else{
                  this.$message.warning('删除失败！' + data.data);
                }
              },()=>{
                this.resetting();
              });
            });
      }
      else {
        this.$message.warning('请勾选删除项！');
      }
    },
    //新增
    addDialog(){
      this.diaFlag = 'add';
      this.oilDiaLogForm = {};
      this.oilDiaLogVisible = true;
    },
    //编辑
    editDialog(row){
      this.diaFlag = 'edit';
      this.oilDiaLogForm = row;
      this.oilDiaLogVisible = true;
    },
    //关闭弹窗
    closeDiaLog(){
      this.oilDiaLogVisible = false;
      this.oilDiaLogForm = {};
      this.$nextTick(() => {
        this.$refs['oilDiaLogForm'].resetFields();
      });
      this.loadList();
    },
    //提交
    submitDiaForm(){
      this.$refs.oilDiaLogForm.validate((valid) => {
        if (valid) {
          let obj = this.oilDiaLogForm;
          console.log("this.oilDiaLogForm.obj",obj)
          this.$post("/lanzhou/equipment/oilInBatch/oilInMix/inOrUpOilList", obj, (data) => {
            if(data.data === ""){
              this.$message.success('保存成功！');
              this.closeDia();
            }
            else{
              this.$message.warning('保存失败！' + data.data);
            }
          },()=>{});
        } else {
          this.$message.warning('必填项不能为空，请填写！');
          return false;
        }
      });
    },
  },
}
</script>