dy-admin-manager/src/views/main/teamSchedule/index.vue

<template>
  <div>
    <save-form
      :inline="true"
      :model="searchForm"
      ref="searchForm"
      @submit="search"
      @reset="onReSet"
      save-key="teamSchedule"
    >
      <el-form-item prop="organId">
        <el-select
          class="multiple"
          v-model.trim="searchForm.organId"
          filterable
          clearable
          placeholder="请选择分部"
        >
          <el-option
            v-for="(item, index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="userId">
        <remote-search :commit="'setEducations'" v-model="searchForm.userId" />
      </el-form-item>
      <el-form-item prop="month">
        <el-date-picker
          v-model="searchForm.month"
          value-format="yyyy-MM"
          type="month"
          placeholder="请选择月"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" type="primary">搜索</el-button>
        <el-button native-type="reset" type="danger">重置</el-button>
      </el-form-item>
    </save-form>
    <el-table
      style="width: 100%"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="tableList"
    >
      <el-table-column align="center" prop="organName" label="分部">
        <template slot-scope="scope">
          <div>
            <copy-text>{{ scope.row.organName }}</copy-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="month" label="工作周期">
        <template slot-scope="scope">
          <div>
            {{ scope.row.month | dayjsFormatWeek }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userName" label="乐团主管">
        <template slot-scope="scope">
          <div>
            <copy-text>{{ scope.row.userName }}</copy-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="item" label="任务事项">
        <template slot-scope="scope">
          <div>
            {{ scope.row.item | inspectionItemFormat }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="times"
        label="任务次数"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="plannedTimes"
        label="已安排日程次数"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="submittedTimes"
        label="已提交任务数"
      >
        <template slot-scope="scope">
          <div
            :style="
              scope.row.times > scope.row.submittedTimes ? 'color:red' : ''
            "
          >
            {{ scope.row.submittedTimes }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="memo" label="处理意见" width="220">
        <template slot-scope="scope">
          <overflow-text :text="scope.row.memo"></overflow-text>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="studentId" label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="text"  @click="gotoHander(scope.row)">安排日程</el-button>
            <auth :auths="['inspectionItem/update']">
              <el-button
                type="text"
                :disabled="scope.row.times < scope.row.submittedTimes"
                @click="resetLine(scope.row)"
                >处理方式</el-button
              >
            </auth>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      sync
      :total.sync="rules.total"
      save-key="teamSchedule"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="getList"
    />
    <el-dialog title="处理方式" width="700px" :visible.sync="handleVisible">
      <el-form :model="handleForm">
        <el-form-item label="请填写处理方式" prop="memo">
          <el-input
            type="textarea"
            :rows="3"
            v-model="handleForm.memo"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getInspectionItem, resetInspectionItem } from "../api";
import { permission } from "@/utils/directivePage";
import pagination from "@/components/Pagination/index";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        userId: "",
        organId: "",
        month: "",
      },
      handleForm: {
        memo: "",
        id: "",
      },
      tableList: [],
      handleVisible: false,
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    };
  },
  mounted() {
    this.$store.dispatch("setBranchs");
    this.getList();
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    onReSet() {
      this.rules.page = 1;
      this.$refs.searchForm.resetFields();
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    async getList() {
      try {
        this.searchForm.page = this.rules.page;
        this.searchForm.rows = this.rules.limit;
        const res = await getInspectionItem(this.searchForm);
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    resetLine(row) {
      let { id, memo } = row;
      this.handleForm = { id, memo };
      this.handleVisible = true;
    },
    async submitHandle() {
      console.log(this.handleForm);
      try {
        const res = await resetInspectionItem(this.handleForm);
        this.$message.success('提交成功')
        this.getList()
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    gotoHander(row){

    }
  },
};
</script>
<style lang="scss" scoped>
</style>