修改参数及页面

zjf

2023-03-03 26e972196ed6046bcb7fb341be86241c8300fd2b

 src/views/PWS/Subscriptions.vue

@@ -2,98 +2,96 @@
  <div class='subscription'>
    <c-r-m-list-head
      ref="listHead"
      title="订阅"
      main-title="PWS API" />
      title="Subscriptions"
      main-title="Autodesk PWS" />
    <el-form :inline="true" :model="headObj" class="selectInline">
      <el-form-item>
          <span>开始时间:</span>
        <span>合约编号:</span>
        <el-input
          style="width: 200px"
          v-model="headObj.ContractNumber"
          placeholder="请输入合约编号"/>
      </el-form-item>
      <el-form-item>
        <div style='display: flex;'>
          <span style="margin-right: 12px">筛选方式:</span>
          <el-select v-model="headObj.AutoRenewingSubscriptionText" placeholder="请选择" @change="renewalMethodChange">
            <el-option key="1" label="自动续约" value="AutoRenewing Subscription"></el-option>
            <el-option key="2" label="到期日期" value="NoAutoRenewing Subscription"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item v-if="headObj.AutoRenewingSubscriptionText == 'NoAutoRenewing Subscription'">
          <span>到期开始日期:</span>
          <el-date-picker
            v-model="headObj.startDateSince"
            v-model="headObj.StartEndDate"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
          <span>截止时间:</span>
      <el-form-item v-if="headObj.AutoRenewingSubscriptionText == 'NoAutoRenewing Subscription'">
          <span>到期结束日期:</span>
          <el-date-picker
            v-model="headObj.lastModifiedSince"
            v-model="headObj.EndEndDate"
            type="date"
            placeholder="选择最后修改日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <div style='display: flex;'>
          <span style="margin-right: 12px">状态:</span>
          <el-checkbox-group v-model="headObj.subscriptionStatus" style="display: flex; align-items: center;">
            <el-checkbox label="活动"></el-checkbox>
            <el-checkbox label="非活动"></el-checkbox>
            <el-checkbox label="已过期"></el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('query')">新建导出任务</el-button>
          <span>许可开始日期:</span>
          <el-date-picker
            v-model="headObj.StartLastPurchaseDate"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
          <span>许可结束日期:</span>
          <el-date-picker
            v-model="headObj.EndLastPurchaseDate"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
        <span>产品线:</span>
        <el-input
          style="width: 200px"
          v-model="headObj.ProductLine"
          placeholder="请输入产品线"/>
      </el-form-item>
      <el-form-item>
        <span>最终客户名称:</span>
        <el-input
          style="width: 200px"
          v-model="headObj.EndCustomerAccountName"
          placeholder="请输入最终客户名称"/>
      </el-form-item>
      <el-form-item>
        <span>最终客户帐户所在地:</span>
        <el-input
          style="width: 200px"
          v-model="headObj.EndCustomerStateProvince"
          placeholder="请输入最终客户帐户所在地"/>
      </el-form-item>
      <el-form-item>
        <div style='display: flex;'>
          <span style="margin-right: 12px">许可年限:</span>
          <el-select v-model="headObj.Term" placeholder="请选择">
            <el-option key="1" label="一年" value="Annual"></el-option>
            <el-option key="3" label="三年" value="3-Year"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportFile()">导出</el-button>
        <el-button @click="onSubmit('reset')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card class="el-card">
      <el-table
        v-loading="loading"
        id="crm-table"
        :data="tableData"
        :height="tableHeight"
        :cell-style="cellStyle"
        class="n-table--border"
        border
        highlight-current-row
        style="width: 100%"
        @row-click="rowClick">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.field"
          :label="item.name"
          :formatter="fieldFormatter"
          show-overflow-tooltip>
          <template
            slot="header"
            slot-scope="scope">
            <div class="table-head-name">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation">
          <template
            title="hhhhhhhhh"
            slot="header"
            slot-scope="scope">
            <div class="table-head-name">操作</div>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.TaskStatus === 0" style="font-size: 12px; color: #909398; font-weight: 500;">等待处理</span>
            <span v-else-if="scope.row.TaskStatus === 1" style="font-size: 12px; color: #80BF50; font-weight: 500;">正在处理</span>
            <span v-else-if="scope.row.TaskStatus === 2" style="font-size: 12px; color: #5B88F7; font-weight: 500;">导出完成</span>
            <span v-else-if="scope.row.TaskStatus === 3" style="font-size: 12px; color: #DBA450; font-weight: 500;">导出失败</span>
            <el-button style="margin-left: 12px" v-if="scope.row.TaskStatus === 2" size="mini" type="primary"  @click='exportFile(scope.row)'>导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer" v-if='total>0'>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>
    <c-r-m-export
      :show="showCRMExport"
      :crm-type="crmType"
@@ -104,7 +102,6 @@
</template>

<script>
import { ExportSubscriptionsTask, GetSubscriptionsTask } from '@/api/pwsApi/subscriptions'
import CRMListHead from '../clients/components/CRMListHead'
import CRMExport from '../clients/components/CRMExport'
export default {
@@ -133,13 +130,18 @@
      showCRMExport: false,
      crmType: 'subscriptions',
      headObj: {
        startDateSince: '',
        lastModifiedSince: '',
        subscriptionStatus: []
        ContractNumber: '', // 合约编号
        AutoRenewingSubscriptionText: '', // 自动续约合同
        StartEndDate: '', // 到期日期开始时间
        EndEndDate: '', // 到期日期结束时间
        StartLastPurchaseDate: '', // 许可开始时间
        EndLastPurchaseDate: '', // 许可结束时间
        ProductLine: '', // 产品线
        EndCustomerStateProvince: '', // 最终客户帐户所在地
        Term: '', // 许可年限
        EndCustomerAccountName: '' //  最终客户名称
      },
      exportHeadObj: {
        taskId: ''
      },
      exportHeadObj: {},
      pickerOptions: {
        disabledDate (time) {
          return time.getTime(new Date()) > Date.now()
@@ -148,125 +150,36 @@
    }
  },
  mounted () {
    var self = this
    /** 控制table的高度 */
    window.onresize = () => {
      self.updateTableHeight()
    }
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      let params = {
        'PageIndex': this.currentPage,
        'PageSize': this.pageSize
    // 选择非续约合同后清空开始 结束日期
    renewalMethodChange (value) {
      console.log(value)
      if (value === 'Auto-RenewingContract') {
        this.headObj.StartContractEndDate = ''
        this.headObj.EndContractEndDate = ''
      }
      GetSubscriptionsTask(params)
        .then(res => {
          if (res.data.ErrorCode === 200) {
            if (res.data.Result.Count > 0) {
              this.tableData = res.data.Result.List
            } else {
              this.tableData = []
            }
            this.total = res.data.Result.Count
            this.loading = false
          } else {
            this.$message.error(res.data.Message)
            this.loading = false
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 更改每页展示数量
    handleSizeChange (val) {
      // Lockr.set('crmPageSizes', val)
      this.pageSize = val
      this.getList()
    },
    // 更改当前页数
    handleCurrentChange (val) {
      this.currentPage = val
      this.getList()
    },
    updateTableHeight () {
      var offsetHei = document.documentElement.clientHeight
      // var removeHeight = Object.keys(this.filterObj).length > 0 ? 310 : 240
      var removeHeight = 240
      this.tableHeight = offsetHei - removeHeight
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      return { textAlign: 'left' }
    },
    rowClick (row, column, event) {
    },
    queryList (data) {
      console.log(data)
    },
    // 列表信息格式化
    fieldFormatter (row, column) {
      if (column.property === 'Status') {
        switch (row[column.property]) {
          case true:
            row[column.property] = '是'
            break
          case false:
            row[column.property] = '否'
            break
        }
      }
      return row[column.property] || '--'
    },
    onSubmit (val) {
      if (val === 'query') {
        if (this.headObj.startDateSince === '') {
          this.$message.error('请选择导出任务的开始时间')
          return
        }
        this.loading = true
        // let status = ''
        // this.headObj.subscriptionStatus.forEach((item) => {
        //   if (status === '') {
        //     status = item
        //   } else {
        //     status = status + ',' + item
        //   }
        // })
        // this.headObj.subscriptionStatus = status
        let params
        if (this.headObj.lastModifiedSince === '') {
          params = {
            startDateSince: this.headObj.startDateSince
          }
        } else {
          params = {
            startDateSince: this.headObj.startDateSince,
            lastModifiedSince: this.headObj.lastModifiedSince
          }
        }
        ExportSubscriptionsTask(params)
          .then(res => {
            if (res.data.ErrorCode === 200) {
              this.loading = false
              this.getList()
            } else {
              this.$message.error(res.data.Message)
              this.loading = false
            }
          })
          .catch(() => {
            this.loading = false
          })
      } else if (val === 'reset') {
        this.headObj = {}
      this.headObj = {
        ContractNumber: '', // 合约编号
        AutoRenewingSubscriptionText: '', // 自动续约合同
        StartEndDate: '', // 到期日期开始时间
        EndEndDate: '', // 到期日期结束时间
        StartLastPurchaseDate: '', // 许可开始时间
        EndLastPurchaseDate: '', // 许可结束时间
        ProductLine: '', // 产品线
        EndCustomerStateProvince: '', // 最终客户帐户所在地
        Term: '', // 许可年限
        EndCustomerAccountName: '' //  最终客户名称
      }
    },
    exportFile (item) {
      console.log(item)
      this.exportHeadObj.taskId = item.Id
    exportFile () {
      console.log(this.headObj)
      this.exportHeadObj = this.headObj
      // 需要设置参数 this.headObj
      this.showCRMExport = true
    }
@@ -301,15 +214,5 @@
     line-height: 28px;
  }
}
/** 分页布局 */
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  .p-bar {
    float: right;
    margin: 5px 0 0 0;
    font-size: 14px !important;
  }
}

</style>