front/front-vue/src/views/service/financeProduct/financeProduct.vue

<template>
  <div class="app-container">
      <el-card class="fiche">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
          <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
         <div  style="float: right;margin-right:1%">
            <el-button type="cyan"  icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"  style="float: ;">重置</el-button>
            <column-setting :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :tableId="tableId"></column-setting>
         </div>
         <hr  style="margin-top: 16px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="产品名称" prop="zfpName" >
        <el-input
          v-model="queryParams.zfpName"
          placeholder="请输入产品名称"
          clearable
          size="small"
          maxlength="30"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="资方" prop="scyName" >
        <el-input
          v-model="queryParams.scyName"
          placeholder="请输入资方名称"
          clearable
          size="small"
          maxlength="30"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item  label="最短账期">
          <el-input
          type = "number"
          v-model="queryParams.begin"
          placeholder="请输入最短账期"
          clearable
          size="small"
          maxlength="20"
          min="0"
        />
      </el-form-item>
      <el-form-item>
        ~
      </el-form-item>
      <el-form-item>
          <el-input
          type = "number"
          v-model="queryParams.end"
          placeholder="请输入最短账期"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
          maxlength="20"
          min="1"
        />
      </el-form-item>
   
    </el-form>
      </el-card>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['service:financeProduct:add']"
        >新增</el-button>
      </el-col>
	
    </el-row>

    <el-table v-loading="loading" :data="financeProductList" @selection-change="handleSelectionChange" border>
      <el-table-column label="序号" type="index" width="50" align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>      
      <el-table-column label="产品编号" align="center" prop="zfpNumber" :show-overflow-tooltip="true"  v-if="uncheckList.zfpNumber"/>
      <el-table-column label="产品名称" align="center" prop="zfpName" :show-overflow-tooltip="true"  v-if="uncheckList.zfpName"/>
      <el-table-column label="产品类型" align="center" prop="zfpType" :formatter="typeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpType"/>
      <el-table-column label="资金方" align="center" prop="scyName" :show-overflow-tooltip="true"  v-if="uncheckList.scyName"/>
      <el-table-column label="是否可拆转融" align="center" prop="zfpSplit" :formatter="splitFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpSplit"/>
      <el-table-column label="是否有追索权" align="center" prop="zfpRecourse" :formatter="recourseFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpRecourse"/>
      <el-table-column label="电子凭证类型" align="center" prop="zfpVoucherType" :formatter="voucherTypeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpVoucherType"/>
      <el-table-column label="服务费是否可退" align="center" prop="zfpCharge" :formatter="chargeFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpCharge"/>
      <el-table-column label="产品状态" align="center" prop="zfpStatus" :formatter="statusFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpStatus"/>
      <el-table-column label="最小融资金额(元)" align="center" prop="zfpMinimumAmount" :formatter="moneyFormat" :show-overflow-tooltip="true"  v-if="uncheckList.zfpMinimumAmount"/>
      <el-table-column label="最短账期" align="center" prop="zfpShortestPeriod" :show-overflow-tooltip="true"  v-if="uncheckList.zfpShortestPeriod"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['service:financeProduct:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleChange(scope.row)"
            v-if="scope.row.zfpStatus == '01'"
            v-hasPermi="['service:financeProduct:change']"
          >停用</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleChange(scope.row)"
            v-if="scope.row.zfpStatus == '00'"
            v-hasPermi="['service:financeProduct:change']"
          >启用</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDel(scope.row)"
            v-if="scope.row.zfpStatus == '00'"
            v-hasPermi="['service:financeProduct:delete']"
          >删除</el-button>
           <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleInfo(scope.row)"
            v-hasPermi="['service:financeProduct:query']"
          >详情</el-button>
        </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 { listFinanceProduct,changeState,delFinanceProduct } from "@/api/service/financeProduct/financeProduct";
import ColumnSetting from "../../../components/Table/columnSetting.vue";
import { columnQuery, columnfilter } from "@/api/common/columnSetting";
import Cookies from 'js-cookie'
export default {
  name: "financeProduct",
  components: {
    ColumnSetting 
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      financeProductList:[],
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zfpName: null,
        scyName: null,
        begin: null,
        end: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        //  pptName:[
        //   { required: true, message: "项目类型不能为空", trigger: "blur" },
        // ]
      },
      tableList: [
        {
          label: "zfpNumber",
          value: "产品编号"
        },
        {
          label: "zfpName",
          value: "产品名称"
        },
        {
          label: "zfpType",
          value: "产品类型"
        },
        {
          label: "scyName",
          value: "资金方"
        },
        {
          label: "zfpSplit",
          value: "是否可拆转融"
        },
        {
          label: "zfpRecourse",
          value: "是否有追索权"
        },
        {
          label: "zfpVoucherType",
          value: "电子凭证类型"
        },
        {
          label: "zfpCharge",
          value: "服务费是否可退"
        },
        {
          label: "zfpStatus",
          value: "产品状态"
        },
        {     
          label: "zfpMinimumAmount",
          value: "最小融资金额"
        },
        {
          label: "zfpShortestPeriod",
          value: "最短账期"
        },
      ],
      checkList: [], //筛选列选中的数据列表--显示隐藏列用
      uncheckList: {}, //控制筛选列显示隐藏--显示隐藏列用
      selfDom: this,
      tableId: "/service/financeProduct/list",
    };
},
  created() {
    this.getList();
    this.getDicts("zc_zfp_split").then((response) => {
      this.splitOptions = response.data;
    });
    this.getDicts("zc_zfp_recourse").then((response) => {
      this.recourseOptions = response.data;
    });
    this.getDicts("zc_zfp_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("zc_zfp_charge").then((response) => {
      this.chargeOptions = response.data;
    });
    this.getDicts("zc_zfp_voucher_type").then((response) => {
      this.voucherTypeOptions = response.data;
    });
    this.getDicts("zc_zfp_type").then((response) => {
      this.typeOptions = response.data;
    });
  },
  activated(){
    this.getList();
  },
  mounted() {
    this.columnQuery();
  },
  methods: {
    
    /** 查询融资产品列表 */
    getList() {
      this.loading = true;
      listFinanceProduct(this.queryParams).then(response => {
        this.financeProductList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
       
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.begin = "";
      this.queryParams.end = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
     /*  this.ids = selection.map(item => item.ptcId)
      this.single = selection.length!==1
      this.multiple = !selection.length */
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.resetQuery();
      Cookies.set("/financeProduct/addFinanceProduct/", this.$route.fullPath);
      this.$router.push({path:"/financeProduct/addFinanceProduct/"});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const zfpId = row.zfpId
      this.resetQuery();
      Cookies.set("/financeProduct/editFinanceProduct/"+zfpId+"/", this.$route.fullPath);
      this.$router.push({path:"/financeProduct/editFinanceProduct/"+zfpId+"/"});
    },/** 修改按钮操作 */
    handleInfo(row) {
      const zfpId = row.zfpId
      this.resetQuery();
      Cookies.set("/financeProduct/detailFinanceProduct/"+zfpId+"/", this.$route.fullPath);
      this.$router.push({path:"/financeProduct/detailFinanceProduct/"+zfpId+"/"});
    },
    /** 启用按钮操作 */
     handleChange(row) {
         let text = row.zfpStatus === "00" ? "开启产品" : "停用产品";
            this.$confirm(
                "确认要" + text + '"' + row.zfpName + '"吗?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return changeState(row.zfpId);
                })
                .then(() => {
                  this.getList();
                    this.msgSuccess(text +'"'+ row.zfpName + '"成功');
                })
                .catch(function () {

                });
       
     },
    //拆转融字典反显
    splitFormat(row, column) {
      return this.selectDictLabel(this.splitOptions, row.zfpSplit);
    },
    //是否有追索权字典反显
    recourseFormat(row, column) {
      return this.selectDictLabel(this.recourseOptions, row.zfpRecourse);
    },
    //产品状态字典反显
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.zfpStatus);
    },
    //服务费是否可退字典反显
    chargeFormat(row, column) {
      return this.selectDictLabel(this.chargeOptions, row.zfpCharge);
    },
    //电子凭证类型字典反显
    voucherTypeFormat(row, column) {
      return this.selectDictLabel(this.voucherTypeOptions, row.zfpVoucherType);
    },
    //类型字典反显
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.zfpType);
    },
    //获取当前客户是否之前设置过列展示隐藏
    columnQuery() {
      //获取页面路径
      var psfPagePath = window.location.pathname;

      //用请求后台的url作为唯一标识
      var psfTableName = this.tableId;
      var columnForm = {};
      columnForm.psfPagePath = psfPagePath;
      columnForm.psfTableName = psfTableName;
      columnQuery(columnForm).then(response => {
        if (response.data && response.data.psfShowData) {
          this.checkList = response.data.psfShowData;
        }
        this.filter();
      });
    },
    //控制隐藏显示的函数
    filter(checkList) {
      if (!!checkList) {
        this.checkList = checkList;
      }
      columnfilter(this.selfDom);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.pptId != null) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            })
            updateProjectType(this.form).then(response => {
              loading.close();
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).catch((response)=>{
              loading.close();
            });
          } else {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            })
            addProjectType(this.form).then(response => {
              loading.close();
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).catch((response)=>{
              loading.close();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDel(row) {
      const zfpId = row.zfpId || this.ids;
      const zfpName = row.zfpName;
      this.$confirm('是否确认删除产品名称为"'+ zfpName +'"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delFinanceProduct(zfpId);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
           .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
           
          });
        });
    },
    //列表格式化金额
    moneyFormat(row, column, cellValue) {
        if(cellValue == null || cellValue== undefined || cellValue == ''){
            cellValue = '0.00'
        }
        cellValue += '';
        if (!cellValue.includes('.')) {
            cellValue += '.00';
        }
        return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + ',';
          }).replace(/\.$/, '');
    },
    /** 导出按钮操作 */
    handleExport() {
      /* this.download('base/taxCode/export', {
        ...this.queryParams
      }, `base_taxCode.xlsx`) */
    }
  }
};
</script>