VUE-element-table動態添加刪除行

 

 

<template>
  <div class="app-container">
    <el-row style="margin-top: 20px">
      <el-col :span="24" style="border-left: 5px solid #1d6ced;margin-bottom: 10px">
        <label style="margin-left: 10px">追加審批</label>
      </el-col>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="bizSceneId" label="場景">
          <template slot-scope="scope">
            <el-select v-model="scope.row.bizSceneId" placeholder="請選擇">
              <el-option
                v-for="dict in approvalScenes"
                :key="dict.dictValue"
                :value="dict.dictValue"
                :label="dict.dictLabel"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="超越價格的審批" align="center">
          <template slot-scope="scope" v-if="scope.row.bizSceneId == '2'">
            <el-input v-model="scope.row.price" style="width:100px"></el-input>元
          </template>
        </el-table-column>

        <el-table-column prop="empId" label="追加審批人">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.empId"
              placeholder="請選擇負責人"
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="item in leaderOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.certNo }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column prop="addtoLevel" label="追加審批級別">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.addtoLevel" align="left">
              <el-radio label="1">原審批流程第一級之前</el-radio>
              <el-radio label="2">原審批流程最后一級之前</el-radio>
              <el-radio label="3">原審批流程最后一級之后</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column prop="applyScope" label="適用范圍">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.applyScope" align="left">
              <el-radio
                label="1"
                @click.native="clickRadio($event, 1,scope.row.depts,scope.row)"
              >全公司</el-radio>
              <el-radio
                label="2"
                @click.native="clickRadio($event, 2,scope.row.depts,scope.row)"
              >指定分公司及所屬部門</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="addLine"
              type="primary"
              v-if="scope.$index == tableData.length - 1"
            >添加</el-button>

            <el-button
              type="danger"
              v-if="tableData.length > 1"
              @click="handleDelete(scope.$index, scope.row)"
              class="del-btn"
            >刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="6" :offset="12">
        <el-button type="primary" @click="saveData">保 存</el-button>
      </el-col>
    </el-row>
    <!-- 添加或修改員工基本信息對話框 -->
    <el-dialog title="指定分公司及所屬部門" :visible.sync="deptOpen" width="500px">
      <div>
        <el-row>
          <el-col :span="24">
            <treeselect
              v-model="rowSelect"
              :options="empDeptOptions"
              :normalizer="normalizer"
              placeholder="選擇部門"
              :multiple="true"
            />
          </el-col>
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveTree">確 定</el-button>
        <el-button @click="deptOpen=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped="scoped">
.treeSelect {
  /deep/ .el-form-item__content {
    margin-top: 1px;
    height: 32px;
    line-height: 30px;
  }
}
</style>
<script>
import {
  listApproveRuleAddto,
  addApproveRuleAddto
} from "@/api/crm/approveRuleAddto";
import { listEmp } from "@/api/crm/dept";
import {
  listEmployee,
  getEmployee,
  delEmployee,
  addEmployee,
  updateEmployee,
  exportEmployee,
  listDept,
  editStatus,
  editUseStatus,
  delCert,
  getStation
} from "@/api/crm/employee";
import { getLevelJiangLi, getLevelEmp } from "@/api/crm/emplevel";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "ApproveRule",
  components: { Treeselect },
  data() {
    return {
      // 是否顯示彈出層
      open: false,
      // 遮罩層
      loading: true,
      // 選中數組
      ids: [],
      // 非單個禁用
      single: true,
      // 非多個禁用
      multiple: true,
      // 總條數
      total: 0,
      // 產品設置-審批規則表格數據
      approveRuleList: [],
      // 產品設置-審批規則表格數據
      approveEnableds: [],
      // 彈出層標題
      title: "",
      // 是否顯示彈出層
      deptOpen: false,
      // 查詢參數
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        comId: undefined,
        bizSceneId: undefined,
        bizSceneId: undefined,
        isForce: undefined
      },
      // 表單參數
      form: {
        listData: []
      },
      // 表單參數
      formAdd: {},
      // 表單校驗
      rules: {},
      tableData: [
        {
          bizSceneId: "",
          price: "",
          empId: "",
          addtoLevel: "",
          applyScope: ""
        }
      ],
      approvalScenes: [],
      leaderOptions: [],
      //部門
      empDeptOptions: [],
      rowSelect: [],
      rowData: {}
    };
  },
  created() {
    this.getList();
    //獲取審批開關字典
    this.getDicts("approve_flow_enabled").then(response => {
      this.approveEnableds = response.data;
    });
    // 獲取審批場景字典;
    this.getDicts("approval_scene").then(response => {
      this.approvalScenes = response.data;
    });
    //獲取員工列表
    this.getEmployeeSelect();
    listDept().then(response => {
      this.empDeptOptions = this.handleTree(response.data, "deptId");
    });
  },
  methods: {
    /*查詢員工列表*/
    getEmployeeSelect() {
      listEmp(1).then(response => {
        this.leaderOptions = response.data;
      });
    },
    //審批開關碼表轉化
    setApprovalSceneFormatter(row, column) {
      return this.selectDictLabel(this.approvalScenes, row.type);
    },
    /** 查詢產品設置-審批規則列表 */
    getList() {
      this.loading = true;
      listApproveRuleAddto(this.queryParams).then(response => {
        debugger;
        var a = this.leaderOptions;
        this.tableData = response.rows;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].addtoLevel = this.tableData[
            i
          ].addtoLevel.toString();
          this.tableData[i].applyScope = this.tableData[
            i
          ].applyScope.toString();
          this.tableData[i].empId = Number(this.tableData[i].empId);
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按鈕
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表單重置
    reset() {
      this.form = {
        id: undefined,
        comId: undefined,
        bizSceneId: undefined,
        bizSceneId: undefined,
        isForce: undefined,
        crmApproveRules: [],
        crmApproveRuleAlert: [],
        createTime: undefined,
        updateTime: undefined,
        createBy: undefined,
        updateBy: undefined
      };
      this.approveRuleAddtoList = this.approveRuleAddtoList;
      this.resetForm("form");
    },
    /** 搜索按鈕操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按鈕操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多選框選中數據
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按鈕操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加產品設置-審批規則";
    },
    /** 修改按鈕操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getApproveRule(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改產品設置-審批規則";
      });
    },
    /** 提交按鈕 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form);
          this.form.crmApproveRules = this.crmApproveRules;
          this.form.crmApproveRuleAlert = this.crmApproveRuleAlert;
          if (this.form.id != undefined) {
            addApproveRuleInfo(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addApproveRuleInfo(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 提交按鈕 */
    submitFormAdd: function() {
      this.$refs["approveRuleAddtoList"].validate(valid => {
        if (valid) {
          if (this.approveRuleAddtoList.id != undefined) {
            addApproveRuleInfo(this.approveRuleAddtoList).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                // this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addApproveRuleInfo(this.approveRuleAddtoList).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                // this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 刪除按鈕操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        '是否確認刪除產品設置-審批規則編號為"' + ids + '"的數據項?',
        "警告",
        {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delApproveRule(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("刪除成功");
        })
        .catch(function() {});
    },
    /** 導出按鈕操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否確認導出所有產品設置-審批規則數據項?", "警告", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return exportApproveRule(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        })
        .catch(function() {});
    },
    /** 追加一行 */
    addJurisdiction(row, index) {
      this.approveRuleAddtoList.push(this.formAdd);
    },
    /** 刪除一行 */
    delJurisdiction(row, index) {
      this.approveRuleAddtoList.splice(index, 1);
    },
    addLine() {
      //添加行數
      var newValue = {
        bizSceneId: "1",
        price: "",
        empId: "",
        addtoLevel: "1",
        applyScope: "1"
      };
      //添加新的行數
      this.tableData.push(newValue);
    },
    handleDelete(index) {
      //刪除行數
      this.tableData.splice(index, 1);
    },
    // 保存數據
    saveData() {
      this.form.listData = this.tableData;
      addApproveRuleAddto(this.form).then(response => {
        if (response.code === 200) {
          this.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    /** 轉換部門數據結構 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 打開彈出框
    clickRadio(e, index, val, row) {
      debugger;
      this.rowSelect = [];
      this.rowData = row;
      if (index == "2") {
        if (undefined != val && "" != val) {
          var arr = val.split(",");
          for (let i = 0; i < arr.length; i++) {
            this.rowSelect.push(Number(arr[i]));
          }
        }
        this.deptOpen = true;
      }
    },
    // saveTree
    saveTree() {
      debugger;
      var _this = this;
      var rowData = _this.rowData;
      var treeData = _this.rowSelect;
      for (let i = 0; i < _this.tableData.length; i++) {
        if (_this.tableData[i].id == rowData.id) {
          let str = "";
          for (let k = 0; k < treeData.length; k++) {
            str += treeData[k] + ",";
          }
          // _this.tableData[i].depts = treeData;
          // str.substring(0,str.length-1);
          str = str.substring(0, str.length - 1);
          _this.tableData[i].depts = str;
        }
      }
      this.deptOpen = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 15px;
  .requiredIcon {
    color: red;
  }
}
</style>