動(dòng)態(tài)添加表格

image.png

    <el-table-column prop="price" label="超越價(jià)格的審批" 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="請選擇負(fù)責(zé)人"
          filterable
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in leaderOptions"
            :key="item.empId"
            :label="item.name"
            :value="item.empId"
          ></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"
          v-hasPermi="['crm:approveRuleAddto:add']"
        >添加</el-button>

        <el-button
          type="danger"
          v-if="tableData.length > 1"
          @click="handleDelete(scope.$index, scope.row)"
          class="del-btn"
          v-hasPermi="['crm:approveRuleAddto:remove']"
        >刪除</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" v-hasPermi="['crm:approveRuleAddto:edit']">保 存</el-button>
  </el-col>
</el-row>
<!-- 添加或修改員工基本信息對話框 -->
<el-dialog title="指定分公司及所屬部門" :before-close="handleClose" :visible.sync="deptOpen" width="650px">
  <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 Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
name: "ApproveRule",
props: ["cId"],
components: { Treeselect },
data() {
return {
// 是否顯示彈出層
open: false,
// 遮罩層
loading: true,
// 選中數(shù)組
ids: [],
// 非單個(gè)禁用
single: true,
// 非多個(gè)禁用
multiple: true,
// 總條數(shù)
total: 0,
// 產(chǎn)品設(shè)置-審批規(guī)則表格數(shù)據(jù)
approveRuleList: [],
// 產(chǎn)品設(shè)置-審批規(guī)則表格數(shù)據(jù)
approveEnableds: [],
// 彈出層標(biāo)題
title: "",
// 是否顯示彈出層
deptOpen: false,
// 查詢參數(shù)
queryParams: {
pageNum: 1,
pageSize: 10,
comId: undefined,
bizSceneId: undefined,
bizSceneId: undefined,
isForce: undefined
},
// 表單參數(shù)
form: {
listData: []
},
// 表單參數(shù)
formAdd: {},
// 表單校驗(yàn)
rules: {},
tableData: [
{
bizSceneId: "",
price: "",
empId: "",
addtoLevel: "",
applyScope: ""
}
],
approvalScenes: [],
leaderOptions: [],
//部門
empDeptOptions: [],
rowSelect: [],
rowData: {},
comId: "",
param: {
pageNum: 1,
pageSize: 999,
comId: undefined
}
};
},
created() {
this.comId = this. $props.cId; this.param.comId = this.$ props.cId;
this.getList();
//獲取審批開關(guān)字典
this.getDicts("approve_flow_enabled").then(response => {
this.approveEnableds = response.data;
});
// 獲取審批場景字典;
this.getDicts("approval_scene").then(response => {
this.approvalScenes = response.data;
});
// 獲取員工
this.getEmployeeSelect();
// 獲取部門
this.getEmpDeptSelect();
},
methods: {
/查詢員工列表/
getEmployeeSelect() {
// let param = {
// pageNum:1,
// pageSize:999,
// comId:this.comId
// };
listEmployee(this.param).then(response => {
this.leaderOptions = response.rows;
});
},
/查詢部門/
getEmpDeptSelect() {
// let param = {
// pageNum:1,
// pageSize:999,
// comId:this.comId
// };
listDept(this.param).then(response => {
this.empDeptOptions = this.handleTree(response.data, "deptId");
});
},
//審批開關(guān)碼表轉(zhuǎn)化
setApprovalSceneFormatter(row, column) {
return this.selectDictLabel(this.approvalScenes, row.type);
},
/** 查詢產(chǎn)品設(shè)置-審批規(guī)則列表 /
getList() {
this.loading = true;
this.queryParams.comId = this.comId;
listApproveRuleAddto(this.queryParams).then(response => {
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);
}
if (this.tableData.length == 0) {
//添加行數(shù)
var newValue = {
bizSceneId: "",
price: "",
empId: "",
addtoLevel: "1",
applyScope: "1"
};
//添加新的行數(shù)
this.tableData.push(newValue);
}
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();
},
// 多選框選中數(shù)據(jù)
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 = "添加產(chǎn)品設(shè)置-審批規(guī)則";
},
/* 修改按鈕操作 /
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getApproveRule(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改產(chǎn)品設(shè)置-審批規(guī)則";
});
},
/* 提交按鈕 /
submitForm: function() {
this. $refs["form"].validate(valid => { if (valid) { 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("是否確認(rèn)刪除此數(shù)據(jù)?", "警告", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }) .then(function() { return delApproveRule(ids); }) .then(() => { this.getList(); this.msgSuccess("刪除成功"); }) .catch(function() {}); }, /** 導(dǎo)出按鈕操作 */ handleExport() { const queryParams = this.queryParams; this.$ confirm("是否確認(rèn)導(dǎo)出所有產(chǎn)品設(shè)置-審批規(guī)則數(shù)據(jù)項(xiàng)?", "警告", {
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() {
//添加行數(shù)
var newValue = {
bizSceneId: "1",
price: "",
empId: "",
addtoLevel: "1",
applyScope: "1"
};
//添加新的行數(shù)
this.tableData.push(newValue);
},
handleDelete(index) {
//刪除行數(shù)
this.tableData.splice(index, 1);
},
handleClose(){

},
// 保存數(shù)據(jù)
saveData() {
  this.form.listData = this.tableData;
  this.form.comId = this.comId;
  addApproveRuleAddto(this.form).then(response => {
    if (response.code === 200) {
      this.msgSuccess("新增成功");
      this.open = false;
      this.getList();
    } else {
      this.msgError(response.msg);
    }
  });
},
/** 轉(zhuǎn)換部門數(shù)據(jù)結(jié)構(gòu) */
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) {
  //
  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() {
  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>