zhgdyun/src/views/projectFront/safeSame/subdivisionalWorks.vue

<template>
  <!-- 分部分项工程 -->
  <div class="fullHeight">
    <div>
      <div class="searchBox whiteBlock">
        <el-form
          :inline="true"
          size="medium"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-button
              class="expintBtn"
              size="medium"
              type="primary"
              @click="addBefore(1)"
            >
              新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_wrap whiteBlock">
        <vue-scroll>
          <el-table
            class="tables"
            :data="listData"
            lazy
            row-key="id"
            default-expand-all
            :tree-props="{ children: 'children' }"
          >
            <el-table-column
              width="400"
              prop="subdivisionProjectName"
              label="工程名称"
            >
            </el-table-column>
            <el-table-column align="center" prop="createDate" label="创建日期">
            </el-table-column>
            <el-table-column align="center" prop="updateDate" label="更新日期">
            </el-table-column>
            <el-table-column width="200" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.stop="editBefore(scope.row)"
                  type="text"
                >
                  <i class="el-icon-edit"></i>编辑
                </el-button>
                <el-button
                  @click.native.stop="addBefore(scope.row)"
                  type="text"
                  v-if="scope.row.parentId == 0"
                >
                  <i class="el-icon-edit"></i>新增
                </el-button>
                <el-button
                class="delete-btn"
                  @click.native.stop="deleteBefore(scope.row.id)"
                  type="text"
                >
                  <i class="el-icon-delete"></i>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </vue-scroll>
      </div>
      <el-dialog
        :modal-append-to-body="false"
        :title="title"
        :visible.sync="dialogVisible"
        width="667px"
      >
        <div class="dialog_content">
          <el-form
            ref="addEditForm"
            label-width="140px"
            size="medium"
            class="dialogFormBox"
            :rules="addEditRules"
            :model="workerInfo"
          >
            <el-form-item label="工程名称" prop="subdivisionProjectName">
              <el-input
                v-model="workerInfo.subdivisionProjectName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            @click="dialogVisible = false"
            icon="el-icon-circle-close"
            size="medium"
            >取消
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="submitBtn"
            size="medium"
            >确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  <script>
import {
  getSubdivisionProjectApi, //所有分部分项工程， 以父子节点形式呈现
  addSubdivisionProjectApi,//新增
  upSubdivisionProjectApi,//修改
  delSubdivisionProjectApi,//删除
} from "@/assets/js/api/quality";

export default {
  mounted() {},
  data() {
    return {
      title: "",
      projectSn: "",
      dialogVisible: false, //新增弹窗
      workerInfo: {
        subdivisionProjectName: "",
        children:[],
        id:"",
        level:0,
        parentId:""
      },
      listData:[],
      addEditRules: {
        subdivisionProjectName: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
      },
      dialogImageUrl: "",
      showBigImg: false,
    };
  },
 
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getProgressListData();
  },
  methods: {
    //新增一级按钮
    addBefore(val) {
      this.workerInfo.subdivisionProjectName=''
      if(val != 1) {
        console.log("这是个添加二级操作 +",val);
        this.workerInfo.parentId = val.id
      }
      this.dialogVisible = true;
      this.title = "新增工程名称";
      setTimeout(() => {
        this.$refs.addEditForm.clearValidate();
      }, 300);
    },
    //删除按钮
    deleteBefore(val) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delSubdivisionProjectApi({ id: val}).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getProgressListData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取列表数据
    getProgressListData() {
      let data = {
        projectSn: this.projectSn,
      };
      getSubdivisionProjectApi(data).then((res) => {
        if (res.code == 200) {
          console.log("获取到的列表", res);
          this.listData = res.result;
        }
      });
    },

    // 编辑按钮
    editBefore(val) {
      console.log("编辑 ：", val);
      this.title = "编辑工程名称";
      this.workerInfo = JSON.parse(JSON.stringify(val));
      this.dialogVisible = true;
    },
    //新增/编辑
    submitBtn() {
      this.workerInfo.projectSn = this.projectSn
      this.$refs.addEditForm.validate((valid) => {
        if (valid) {
          if(this.title=='新增工程名称'){
            addSubdivisionProjectApi(this.workerInfo).then(res=>{
              this.$message.success("新增成功");
             this.dialogVisible = false
             this.getProgressListData();
            })
          }else{
            upSubdivisionProjectApi(this.workerInfo).then(res=>{
              this.$message.success("编辑成功");
             this.dialogVisible = false
             this.getProgressListData();
            })
          }
        } else {
          return false;
        }
      });
      this.workerInfo = {
        subdivisionProjectName: "",
        children:[],
        id:"",
        level:0,
        parentId:""
      };
    },
  },
};
</script>
  <style lang="less" scoped>
.down {
  text-decoration: none;
  color: #fff;
}
.expintBtn {
  display: inline-block !important;
  margin-right: 10px;
}
.table_wrap {
  height: 800px;
  overflow: auto;
  margin-top: -15px;
}
</style>