Smart_platform_ui/src/views/workManagement/task/index.vue

<template>
  <basic-container>
    <avue-crud :option="option" :data="dataList" ref="crud" v-model="form" :page.sync="page" :search.sync="search"
      :table-loading="loading" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="cornIdSearch">
        <select-component v-model="search.cornId" :configuration="configuration"></select-component>
      </template>
      <template slot-scope="scope" slot="cornId">
        {{ scope.row.cornName }}
      </template>
      <template slot="menuLeft">
        <el-button icon="el-icon-printer" size="small" type="primary" :loading="exportLoading" @click.stop="downFile">导出
        </el-button>
      </template>
      <template slot="userid" slot-scope="{row,index}">
        <user-select style="width:90% !important;" v-if="row.$cellEdit" v-model="row.userName"
          @value="(values) => value(values, row)" :configuration="UConfiguration">
        </user-select>
        <span v-else>{{ row.userName }}</span>
      </template>
      <template slot-scope="{row,index}" slot="menu">
        <el-button type="text" icon="el-icon-view" size="small" @click.stop="copyTo">发送
        </el-button>
        <el-button type="text" icon="el-icon-edit" :disabled="row.status != 5 || row.taskStatus == 30" size="small"
          @click.stop="completion(row)">完工
        </el-button>
        <el-button type="text" icon="el-icon-edit" size="small" @click.stop="rowCell(row)">{{ row.$cellEdit ? "保存" :
            "修改"
        }}
        </el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body title="消息" class="el-dialogDeep" :visible.sync="copyToDialog" width="60%"
      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
      <avue-form class="trading-form" :option="optionMeg" ref="formMeg" v-model="formMeg">
        <template slot="toUserId">
          <el-select v-model="formMeg.toUserId" remote filterable clearable @change="toUserChange"
            :remote-method="remoteMethod">
            <el-option v-for="item in userOption" :key="item.value" :label="item.realName" :value="item.id">
            </el-option>
          </el-select>
        </template>
      </avue-form>
      <div style="margin-left: 80%;padding: 10px">
        <el-button size="small" @click="copyToDialog = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitCopy()">确定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import option from "./configuration/mainList.json";
import { getFlowList } from "@/api/workManagement/mainProject";
import { updateItemStatus } from "@/api/workManagement/mainProject";
import { getUserList } from "@/api/workManagement/mainProject";
import { saveMessage } from "@/api/logs";
export default {
  name: "customerInformation",
  data() {
    return {
      loading: false,
      exportLoading: false,
      copyToDialog: false,
      form: {},
      search: {},
      configuration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
      option: option,
      parentId: 0,
      dataList: [],
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      query: {},
      userOption: [],
      optionMeg: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: 120,
        menuSpan: 8,
        column: [
          {
            label: '抄送人',
            prop: 'toUserId',
            span: 12,
            type: 'select',
            rules: [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '抄送日期',
            prop: 'createTime',
            type: "datetime",
            span: 12,
            disabled: true,
            rules: [
              {
                required: false,
                message: ' ',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '内容',
            prop: 'messageBody',
            span: 24,
            rules: [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      formMeg: {},
      UConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        placeholder: '请点击右边按钮选择',
        dicData: []
      },
    }
  },
  created() {

  },
  mounted() {
    getUserList().then(res => {
      res.data.data.map((item, index) => {
        if (index <= 20) {
          this.userOption.push(item)
        }
      })
    })
    // option.height = window.innerHeight - 350 ;
  },
  methods: {
    value(value, row) {
      if (value) {
        row.userid = value.id
        row.deptid = value.deptId
      }
    },
    rowCell(row, index) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    //抄送
    copyTo() {
      this.formMeg = {}
      this.copyToDialog = true;
      let date = new Date();
      let strDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      this.$set(this.formMeg, "createTime", strDate)
    },
    //用户远程模糊
    remoteMethod(query) {
      let params = {
        realName: query
      }
      getUserList(params).then(res => {
        this.userOption = res.data.data
      })
    },
    toUserChange(value) {
      this.userOption.forEach(item => {
        if (item.id == value) {
          this.formMeg.toUserName = item.realName
        }
      })
    },
    submitCopy() {
      this.$refs["formMeg"].validate((valid) => {
        if (valid) {
          saveMessage(this.formMeg).then(res => {
            if (res.data.success) {
              this.$message.success("抄送成功!")
              this.copyToDialog = false
            }
          })
        }
      })
    },
    downFile() {
      this.exportLoading = true
      let searchParams = Object.assign({}, this.search);
      let param = this.paramsAdjustment(searchParams)
      getFlowList(1, 10000, param).then(res => {
        const fileData = this.deepClone(res.data.data.records)
        fileData.map(item => {
          item.cornId = item.cornName
        })
        const fileColumn = this.deepClone(option.column)
        fileColumn.shift();
        this.$Export.excel({
          title: "任务",
          columns: fileColumn,
          data: fileData,
        });
      }).finally(() => {
        this.exportLoading = false
      })
    },
    //完工
    completion(row) {
      this.$confirm("确认将此任务完工?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateItemStatus(row.id, 5).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.onLoad(this.page);
          }
        })
      });
    },
    //点击搜索按钮触发
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done()
    },
    searchReset() {
      console.log('1')
    },
    selectionChange() {
      console.log('1')
    },
    currentChange(val) {
      this.page.currentPage = val
      this.onLoad(this.page)
    },
    sizeChange() {
      console.log('1')
    },
    refreshChange() {
      this.onLoad(this.page)
    },
    paramsAdjustment(params) {
      // params = Object.assign({}, this.search);
      // if (params.beginTime && params.beginTime.length != 0) {  //发货
      //   params.beginStartTime = params.beginTime[0] + " " + "00:00:00";
      //   params.beginEndTime = params.beginTime[1] + " " + "23:59:59";
      //   this.$delete(params, 'beginTime')
      // }
      let data = this.deepClone(Object.assign({}, params, this.search));
      if (data.careteTime && data.careteTime.length > 0) {
        data = {
          ...data,
          beginCreateTime: data.careteTime[0],
          endCreateTime: data.careteTime[1]
        };
      }
      if (!data.status) {
        data.status = "1,4,5";
      }
      return data
    },
    onLoad(page, params) {
      let data = this.paramsAdjustment(params)
      data.branch = 'Y';
      delete data.careteTime;
      this.loading = true;
      getFlowList(page.currentPage, page.pageSize, data).then(res => {
        this.dataList = res.data.data.records
        this.page.total = res.data.data.total
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style scoped>
</style>