zkPCproject/src/views/Template/invalidReception.vue

<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div style="margin-left: 20px; display: flex">
        <el-button @click="editorinfo()" type="primary">新增 </el-button>
        <div style="margin-left: auto; margin-right: 10px"></div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table
        ref="tableSortable"
        :data="tableData"
        stripe
        style="width: 100%; height: 400px"
        row-key="id"
      >
        <el-table-column label="序号" prop="sort" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="无效原因"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }" style="">
            <el-button type="text" @click="bianji(row)">编辑</el-button>
            <el-button type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="editFlag ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      @close="$refs.ruleForm.resetFields()"
    >
      <el-form
        :model="ruleForm"
        label-position="labelPosition"
        :rules="ruleser"
        ref="ruleForm"
        label-width="140px"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="无效原因" prop="name">
          <el-input v-model="ruleForm.name" maxlength="8" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="addForm"
          >保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="删除来源"
      :visible.sync="delVisible"
      @close="$refs.ruleForm.resetFields()"
    >
      <div style="text-align: center; margin-bottom: 20px">
        请将此无效的接待转移到以下无效原因中
      </div>
      <el-form
        :model="ruleForm"
        label-position="labelPosition"
        :rules="ruleser"
        ref="ruleForm"
        label-width="140px"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="无效接待移至" prop="moveId">
          <el-select v-model="deleteParams.moveId" placeholder="请选择">
            <el-option
              v-for="item in delIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            delVisible = false;
            deleteParams.id = '';
          "
          >取 消</el-button
        >
        <el-button type="primary" :loading="loadingFlag" @click="deleteItem"
          >保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import Sortable from "sortablejs";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      currentPage4: 1,
      value: "",
      input: "",
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      loadingFlag: false,
      delVisible: false,
      orgType: localStorage.getItem("orgType"),
      ruleForm: {
        id: "",
        name: "", //
        houseId: localStorage.getItem("houseId"), // 项目id
      },
      houseId: "",
      houseList: [],
      Page: 1,
      size: 10,
      words: "",
      total: 0,
      ruleser: {
        name: [{ required: true, message: "请填写客户来源", trigger: "blur" }],
      },
      editFlag: false,

      paramsList: {
        // 列表入参
        id: "",
        name: "", // 资源名称
        houseId: localStorage.getItem("houseId"), // 项目id
        sort: "", // 顺序
      },
      deleteParams: {
        // 删除入参
        id: "",
        moveId: "",
        sort: "", // 序号
        houseId: localStorage.getItem("houseId"), // 项目id
      },
      delIdList: [], // 要转移的数据位置

      editParams: {
        // 编辑这一项
        id: "", //
        name: "", //
        houseId: localStorage.getItem("houseId"), // 项目id
      },

      loadingObj: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.rowDrop();
    });
    this.getList();
  },
  methods: {
    /*判断类型选择使用方法*/
    addForm() {
      if (!this.editFlag) this.addCustomer();
      else this.editCustomer();
    },

    // 初始化提交变量
    initRuleForm() {
      this.ruleForm = {
        id: "",
        name: "", //
        houseId: localStorage.getItem("houseId"), // 项目id
      };
    },

    // 确认添加
    addCustomer() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.$api.http
          .InvalidReceptionAddInvalid({
            name: this.ruleForm.name,
            houseId: this.paramsList.houseId,
          })
          .then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.initRuleForm();
              this.getList();
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
            this.dialogVisible = false;
          })
          .catch(() => {
            this.dialogVisible = false;
          });
      });
    },

    // 编辑
    editCustomer() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.$api.http
          .InvalidReceptionUpdateInvalid(this.ruleForm)
          .then((res) => {
            this.dialogVisible = false;
            if (res.code == 10000) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.initRuleForm();
              this.getList();
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          })
          .catch(() => {
            this.dialogVisible = false;
          });
      });
    },

    // 删除确认删除item
    deleteItem() {
      if (!this.deleteParams.moveId) {
        this.$message({
          message: "请将此无效的接待转移到以下无效原因中",
          type: "error",
        });
        return;
      }
      this.$api.http
        .InvalidReceptionDelete(this.deleteParams)
        .then((res) => {
          console.log(res);
          this.delVisible = false;
          if (res.code == 10000) {
            this.$message({
              message: res.message,
              type: "success",
            });
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
          this.deleteParams.moveId = "";
          this.getList();
        })
        .catch(() => {
          this.delVisible = false;
        });
    },

    // 获取列表
    getList() {
      this.$api.http
        .InvalidReceptionReasonList({
          houseId: this.paramsList.houseId,
        })
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data.filter(
              (item) => item.id != 6 && item.id != 7 && item.id != 5
            );
          }
          this.$nextTick(() => {
            this.loadingObj.close();
          });
        })
        .catch(() => {
          this.$nextTick(() => {
            this.loadingObj.close();
          });
        });
    },

    //行拖拽
    rowDrop() {
      const transfer = this.$refs.tableSortable.$el;
      const tbody = transfer
        .getElementsByClassName("el-table__body-wrapper")[0]
        .getElementsByClassName("el-table__body")[0]
        .getElementsByTagName("tbody")[0];
      console.log(tbody, "tbody");
      Sortable.create(tbody, {
        animation: 100,
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
          if (newIndex == oldIndex) {
            return;
          }

          this.loadingObj = Loading.service({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          this.$api.http
            .InvalidReceptionUpdateSort({
              houseId: this.paramsList.houseId,
              id: this.tableData[newIndex].id,
              sort: this.tableData[oldIndex].sort,
              moveId: this.tableData[oldIndex].id, // 更换的id
              moveSort: this.tableData[newIndex].sort, // 更换的序号
            })
            .then((res) => {
              console.log(res);
              if (res.code == 10000) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.tableData = [];
                this.getList();
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });

                this.loadingObj.close();
              }
            });
        },
      });
    },
    //删除
    del(item) {
      this.delIdList = [];
      this.deleteParams.id = item.id;
      this.deleteParams.sort = item.sort;
      let arr = [];
      this.tableData.forEach((items) => {
        if (items.id != item.id) {
          arr.push({
            label: items.name,
            value: items.id,
          });
        }
      });
      console.log(arr);
      this.delIdList = arr;
      this.delVisible = true;
    },

    //编辑
    bianji(row) {
      this.dialogVisible = true;
      this.ruleForm.name = row.name;
      this.ruleForm.id = row.id;
      this.editFlag = true;
    },

    editorinfo() {
      this.dialogVisible = true;
      this.editFlag = false;
      this.ruleForm.editFlag = "";
    },
  },
};
</script>


<style lang="scss" scoped>
.box-center {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}

.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
  min-height: 100%;
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}

.dtit-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.div-lab1 {
  display: flex;
  align-items: center;
  margin: 5px;
}

.label1 {
  font-size: 14px;
  color: #32363d;
  line-height: 32px;
  margin-left: 6px;
}

.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 100px;
  text-align: right;
}

.toptimeqhuan {
  height: 30px;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.toptimeqhuan div {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  margin-right: 15px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.div-lab {
  display: flex;
  margin: 5px;
}

.div-inp {
  width: 250px;
}

.el-tooltip__popper {
  max-width: 300px;
}
</style>