WorkloadApp/pages/Project/edit.vue

<template>
  <view>
    <view class="card-wrapper">
      <uni-card title="操作">
        <view class="editBtns" slot="actions">
          <view class="edit" @click="onClickProject">项目详情</view>
          <view class="edit" v-if="canEdit(0)" @click="onEdit">编辑</view>
          <view class="edit" v-if="canEdit(0)" @click="onDelete">删除</view>
          <view class="edit" v-if="canEdit(0)" @click="onSubmitAuth">
            提交审核
          </view>
          <view class="edit" v-if="canEdit(1)" @click="onMember">
            成员管理
          </view>
          <view class="edit" v-if="canEdit(2)" @click="onExecute">
            转执行
          </view>
          <view class="edit" v-if="canEdit(3)" @click="onWarranty">
            转质保
          </view>
          <view class="edit" v-if="canEdit(3)" @click="onOperate">
            转运营
          </view>
        </view>
      </uni-card>
    </view>

    <uni-popup ref="exePopup" type="dialog">
      <uni-popup-dialog
        title="转执行"
        type="info"
        @confirm="submitExecute"
        @close="onCancel"
        before-close
      >
        <uni-forms
          ref="exe"
          :modelValue="formData"
          label-position="left"
          :rules="exeRules"
        >
          <uni-forms-item required label="执行经理:" name="manager">
            <uni-data-picker
              class="depSelect"
              placeholder="请选择执行经理"
              :localdata="depUserTree"
              @change="changeManager"
            />
          </uni-forms-item>
          <uni-forms-item required label="合同状态:" name="contract">
            <picker
              @change="changeContract"
              :range="contracts"
              :value="formData.contract"
            >
              <view class="select">{{ contracts[formData.contract] }}</view>
            </picker>
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="wtyPopup" type="dialog">
      <uni-popup-dialog
        title="转质保"
        type="info"
        @confirm="submitWarranty"
        @close="onCancel"
        before-close
      >
        <uni-forms
          ref="wty"
          :modelValue="formData"
          label-position="left"
          :rules="wtyRules"
        >
          <uni-forms-item required label="质保经理:" name="manager">
            <uni-data-picker
              class="depSelect"
              placeholder="请选择质保经理"
              :localdata="depUserTree"
              @change="changeManager"
            />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="optPopup" type="dialog">
      <uni-popup-dialog
        title="转运营"
        type="info"
        @confirm="submitOperate"
        @close="onCancel"
        before-close
      >
        <uni-forms
          ref="opt"
          :modelValue="formData"
          label-position="left"
          :rules="optRules"
        >
          <uni-forms-item required label="运营经理:" name="manager">
            <uni-data-picker
              class="depSelect"
              placeholder="请选择运营经理"
              :localdata="depUserTree"
              @change="changeManager"
            />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { mapState } from "vuex";
import {
  deleteApproval,
  submitAudit,
  startExecution,
  startWarranty,
  startOperate,
} from "@/services/project";
export default {
  props: ["project", "user"],
  computed: {
    ...mapState(["depUserTree", "showSearch"]),
  },
  data() {
    return {
      contracts: ["无合同", "有合同"],
      formData: {
        manager: "",
        contract: null,
      },
      exeRules: {
        manager: {
          rules: [{ required: true, errorMessage: "请选择质保经理" }],
        },
        contract: {
          rules: [{ required: true, errorMessage: "请选择合同状态" }],
        },
      },
      wtyRules: {
        manager: {
          rules: [{ required: true, errorMessage: "请选择质保经理" }],
        },
      },
      optRules: {
        manager: {
          rules: [{ required: true, errorMessage: "请选择运营经理" }],
        },
      },
    };
  },
  methods: {
    async onClickProject() {
      await this.$store.commit("setCurrentProject", this.project);
      uni.navigateTo({
        url: `./detail?id=${this.project.id}`,
      });
    },
    canEdit(index) {
      let {
        audit_status,
        project_status,
        author,
        LeaderId,
        opt_manager_id,
        wty_manager_id,
      } = this.project;
      //audit_status: 0未提审1审核中2审核拒绝3审核通过
      //project_status: 0售前1执行2转运营3转质保
      switch (index) {
        //编辑删除提审
        case 0:
          //售前阶段，未提审/审核被拒，创建人/管理员
          return (
            project_status == 0 &&
            (audit_status == 0 || audit_status == 2) &&
            (this.user.ID == author || this.user.IsSuper)
          );
        //成员管理
        case 1:
          //售前/执行/运营/质保，审核通过，项目经理/管理员
          let manager;
          switch (project_status) {
            case 0:
              manager = this.user.ID == author;
              break;
            case 1:
              manager = this.user.ID == LeaderId;
              break;
            case 2:
              manager =
                this.user.ID == LeaderId || this.user.ID == opt_manager_id;
              break;
            case 3:
              manager =
                this.user.ID == LeaderId || this.user.ID == wty_manager_id;
              break;
          }
          return audit_status == 3 && (manager || this.user.IsSuper);
        //转执行
        case 2:
          //售前，审核通过，售前经理/管理员
          return (
            project_status == 0 &&
            audit_status == 3 &&
            (this.user.ID == author || this.user.IsSuper)
          );
        //转质保运营
        case 3:
          //执行，审核通过，执行经理/管理员
          return (
            project_status == 1 &&
            audit_status == 3 &&
            (this.user.ID == LeaderId || this.user.IsSuper)
          );
      }
    },
    async onEdit() {
      await this.$store.commit("setCurrentProject", this.project);
      uni.navigateTo({
        url: `./add?project_id=${this.project.id}`,
      });
    },
    onDelete() {
      uni.showModal({
        title: "删除项目",
        content: "是否确认删除该项目",
        confirmText: "删除",
        confirmColor: "#ff7875",
        success: async (res) => {
          if (res.confirm) {
            await deleteApproval(this.project);
            uni.showToast({
              title: "删除成功",
            });
            setTimeout(function () {
              uni.hideToast();
							location.reload();
            }, 1800);
          }
        },
      });
    },
    onSubmitAuth() {
      uni.showModal({
        title: "提交审核",
        content: "是否确认提交审核",
        confirmText: "提审",
        success: async (res) => {
          if (res.confirm) {
            let payload = {
              id: this.project.id,
              flow_id: this.project.flow_id,
              node_id: this.project.node_id,
            };
            await submitAudit(payload);
            uni.showToast({
              title: "提审成功",
            });
            setTimeout(function () {
              uni.hideToast();
							location.reload();
            }, 1800);
          }
        },
      });
    },
    async onMember() {
      await this.$store.commit("setCurrentProject", this.project);
      uni.navigateTo({
        url: "./member",
      });
    },
    changeManager(e) {
      if (e.detail.value.length > 0)
        this.formData.manager = e.detail.value[e.detail.value.length - 1].value;
      else this.formData.manager = "";
    },
    async onExecute() {
      await this.$store.commit("setShowSearch", false);
      this.$refs.exePopup.open();
    },
    changeContract(e) {
      this.formData.contract = e.detail.value;
    },
    async submitExecute() {
      this.$refs.exe.validate(async (err) => {
        if (!err) {
          const [dep_id, manager_id] = this.formData.manager.split("-");
          let payload = {
            project_code_id: this.project.id,
            with_contract: Number(this.formData.contract),
            dep_id: Number(dep_id),
            exe_manager_id: Number(manager_id),
          };
          await startExecution(payload);
          this.$refs.exePopup.close();
          uni.showToast({
            title: "转执行送审成功",
          });
          setTimeout(function () {
            uni.hideToast();
            location.reload();
          }, 1800);
        }
      });
    },
    async onWarranty() {
      await this.$store.commit("setShowSearch", false);
      this.$refs.wtyPopup.open();
    },
    async submitWarranty() {
      this.$refs.wty.validate(async (err) => {
        if (!err) {
          const [dep_id, manager_id] = this.formData.manager.split("-");
          let payload = {
            project_code_id: this.project.id,
            dep_id: Number(dep_id),
            wty_manager_id: Number(manager_id),
          };
          await startWarranty(payload);
          this.$refs.wtyPopup.close();
          uni.showToast({
            title: "转质保送审成功",
          });
          setTimeout(function () {
            uni.hideToast();
            location.reload();
          }, 1800);
        }
      });
    },
    async onOperate() {
      await this.$store.commit("setShowSearch", false);
      this.$refs.optPopup.open();
    },
    async submitOperate() {
      this.$refs.opt.validate(async (err) => {
        if (!err) {
          const [dep_id, manager_id] = this.formData.manager.split("-");
          let payload = {
            project_code_id: this.project.id,
            dep_id: Number(dep_id),
            opt_manager_id: Number(manager_id),
          };
          await startOperate(payload);
          this.$refs.optPopup.close();
          uni.showToast({
            title: "转运营送审成功",
          });
          setTimeout(function () {
            uni.hideToast();
            location.reload();
          }, 1800);
        }
      });
    },
    async onCancel() {
      await this.$store.commit("setShowSearch", true);
      this.$refs.exePopup.close();
      this.$refs.wtyPopup.close();
      this.$refs.optPopup.close();
      this.formData = {
        manager: "",
        contract: null,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.editBtns {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 5%;
  .edit {
    width: 30%;
    margin-bottom: 20px;
    font-size: 28rpx;
    text-align: center;
  }
}

.card-wrapper {
  padding-bottom: 60rpx;
}

.select {
  width: 100%;
  height: 72rpx;
  line-height: 70rpx;
  border: 1px solid #666;
  padding-left: 20rpx;
}
::v-deep {
  .uni-steps__column-title {
    font-size: 18px;
    line-height: 24px;
  }
  .uni-steps__column-desc {
    font-size: 14px;
    line-height: 18px;
  }
}
.depSelect {
  width: 200px;
}
</style>