项目交易中心查询

precision-effect-web/src/views/trade/tradeQuery/index.vue

+<template>
+    <div class="app-container">
+      <el-form
+        :model="queryParams"
+        size="mini"
+        ref="queryForm"
+        :inline="true"
+        v-show="showSearch"
+        label-width="100px"
+      >
+        <el-form-item label="交易细项名称" prop="transactionDetailName">
+
+          <el-input
+            v-model="queryParams.transactionDetailName"
+            placeholder="请输入交易细项名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"/>
+        </el-form-item>
+
+        <el-form-item label="项目状态" prop="tradeStatus">
+          <el-select
+            v-model="queryParams.tradeStatus"
+            placeholder="请选择项目状态"
+            clearable
+            size="small">
+            <el-option
+              v-for="item in transactionProjectStatus"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="卖方部门" prop="queryApplyDeptId">
+          <div style="width: 160px">
+            <treeselect
+              v-model="queryParams.queryApplyDeptId"
+              :options="deptOptions"
+              :show-count="true"
+              placeholder="请选择卖方部门"/>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="买方部门" prop="queryTradeDeptId">
+          <div style="width: 160px">
+            <treeselect
+              v-model="queryParams.queryTradeDeptId"
+              :options="deptOptions"
+              :show-count="true"
+              placeholder="请选择买方部门"/>
+          </div>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+          >搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" :data="projectList">
+        <el-table-column
+          label="交易项目"
+          align="center"
+          prop="relationTransactionProjectId"
+          :formatter="transactionProjectName"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="交易细项名称"
+          align="center"
+          prop="transactionDetailName"
+          :show-overflow-tooltip="true"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.transactionDetailName">{{scope.row.transactionDetailName}}</span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="交易状态"
+          align="center"
+          prop="tradeStatus"
+          :formatter="getTradeStatus"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="卖方"
+          align="center"
+          prop="applyDeptName"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="申请人" align="center" prop="applyName" />
+        <el-table-column label="申请时间" align="center" prop="createTime" width="150px"/>
+        <el-table-column label="申报总价" align="center" prop="tradeTotal" />
+        <el-table-column
+          label="买方"
+          align="center"
+          prop="tradeDeptName"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="买方经办人"
+          align="center"
+          prop="tradeTransactorName"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="交易评分" align="center" prop="tradeScore" />
+        <el-table-column label="交易成交价" align="center" prop="dealPrice" />
+        <el-table-column label="尾款" align="center" prop="pendingPayment" width="80"/>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <OperatorButton
+              operatorName="tradeDetail"
+              :tradeInfo="scope.row"
+              @getList="getList"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+</template>
+
+<script>
+  import OperatorButton from "../components/OperatorButton";
+  import { getTransactionProjectList } from "@/api/transaction/project.js";
+  import { listProject } from "@/api/transaction/tradeProject.js";
+  import Treeselect from "@riophae/vue-treeselect";
+  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  import { treeselect } from "@/api/system/dept";
+  export default {
+    name: "tradeQuery",
+    components: {
+      OperatorButton,
+      Treeselect
+    },
+    data(){
+      return{
+        loading: false,
+        projectList: [],
+        transactionProjectStatus: [],
+        transactionProjects: [],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          relationTransactionProjectId: null,
+          transactionDetailName: null,
+          applyDeptId: null,
+          tradeType: null,
+          tradeDeptId: null,
+          tradeStatus: null,
+          createTime: null,
+          queryApplyDeptId: null,
+          queryTradeDeptId: null
+        },
+        // 总条数
+        total: 0,
+        deptOptions: [],
+        // 显示搜索条件
+        showSearch: true,
+      }
+    },
+    created(){
+      this.getList();
+      this.getTreeselect();
+      this.getTransactionProjects();
+      this.getDicts("t_transaction_project_status").then((response) => {
+        this.transactionProjectStatus = response.data;
+      });
+    },
+    methods: {
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 查询交易项目列表 */
+      getList() {
+        this.loading = true;
+        listProject({...this.queryParams}).then((response) => {
+          this.projectList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      //获取项目列表
+      getTransactionProjects(query) {
+        getTransactionProjectList(query).then((res) => {
+          if (res.code == 200) {
+            this.transactionProjects = res.data;
+          }
+        });
+      },
+      //获取项目名称
+      transactionProjectName(row) {
+        let project = this.transactionProjects.find(
+          (item) => item.transactionProjectId == row.relationTransactionProjectId
+        );
+        if (project) {
+          return project.transactionProjectName;
+        }
+        return "-";
+      },
+      //获取交易状态
+      getTradeStatus(row) {
+        return this.selectDictLabel(
+          this.transactionProjectStatus,
+          row.tradeStatus
+        );
+      },
+      /** 查询部门下拉树结构 */
+      getTreeselect() {
+        treeselect().then((response) => {
+          this.deptOptions = response.data;
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>