admin-web-master/src/views/ads/fangli/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti" v-if="addAct == false  && banAct == false">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>招商方案管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">招商方案管理</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <div>
            <el-form :model="formSel" :inline="true">
              <el-form-item label="方案名称">
                <el-input v-model="formSel.planName" placeholder="请输入" style="width:168px;">
                </el-input>
              </el-form-item>
              <el-form-item label="计划实施时间">
                <el-date-picker style="width:230px;" v-model="plan_Time" value-format="yyyy-MM-dd" prefix-icon="none"
                  type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
            </el-button>
          </div>
        </div>
        <div style="margin-bottom:20px;">
          <el-button style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
            @click="addbuss">新增</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          " :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
          <el-table-column label="序号" min-width="60">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column label="招商方案名称" prop="planName" min-width="300" />
          <!-- <el-table-column
            label="规划方案名称"
            min-width="300"
          >
          <template slot-scope="scope">
            {{scope.row.cereInvestmentPlanningManagement.planningName}}
          </template>
          </el-table-column> -->
          <!-- <el-table-column
            label="计划实施时间"
            min-width="250"
          >
          <template slot-scope="scope">
            {{scope.row.cereInvestmentPlanningManagement.implementationStartTime}} - {{scope.row.cereInvestmentPlanningManagement.implementationEndTime}}
          </template>
          </el-table-column> -->
          <el-table-column label="涵盖资源数">
            <template slot-scope="scope">
              {{ scope.row.cereResourceStrategy.length }}
            </template>
          </el-table-column>
<!-- 
          <el-table-column label="资源类型" prop="contactInformation" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.cereResourceStrategy.id }}
            </template>
          </el-table-column>
          <el-table-column label="租金/周期" min-width="150">
            <template slot-scope="scope">
            </template>
          </el-table-column>
          <el-table-column label="付款日" min-width="150">
            <template slot-scope="scope">
            </template>
          </el-table-column> -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{scope.row.auditStatus =='1'?'待审核':scope.row.auditStatus =='2'?'审核通过':scope.row.auditStatus =='3'?'已驳回':''}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row,false)">
                查看
              </div>
              <div class="tableBtn greens" @click="handleEditForm(scope.row,true)" v-if="scope.row.auditStatus =='1'">
                编辑
              </div>
              <!-- <div class="tableBtn greens">
                禁用
              </div> -->
              <div v-if="scope.row.auditStatus !='2'" class="tableBtn greens" @click="delGuan(scope.row)">
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next,total" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
    <addxin :showAdd="addAct" @childClose='childClose' v-if="addAct"></addxin>
    <xiang :showBian="banAct" :steat='steatqie' :list='itemXiang' @bianClose='bianClose' v-if="banAct"></xiang>
  </div>
</template>
<script>
  import {
    uploadUrl,
    token
  } from '@/utils/request'
  import {
    GetAllLinAn,
    GetOnlinLinAn,
    AddLinAn,
    EditLinAn,
    delLinAn,
    addLin,
    selLin,
    editLin,
    delLin,
    selectList
  } from '../../../api/tspm'
  import {
    fangGetAll,
    fangGetId,
    fangAdd,
    fangEdit,
    fangDel,
  } from '../../../api/fangli'
  import upimg from "@/components/ImageUpload/index"
  import addxin from "./addform"
  import xiang from "./bianform"
  export default {
    components: {
      upimg,
      addxin,
      xiang
    },
    data() {
      return {
        detbox: false, // 详情
        edit: true, // 编辑
        formInline: {
          shopName: '',
          positionInformation: '',
          shopArea: '',
          useTo: '',
          rent: '',
          locationImage: '',
          locationDescription: '',
          temporaryPavingId: ''
        }, // 临铺新增数据
        LinID: '', //添加临铺ID
        Ids: '', //查询新增的临铺列表
        action: uploadUrl, // 上传图片
        myHeaders: {
          'Authorization-admin': token
        },
        ggXin: false, // 新增
        sel: [], // 选择资源
        stepNum: 0, // 切换
        linShop: [], // 临铺列表
        isAdd: false, //添加铺位弹框、
        plan_Time: [],
        formSel: {
          planName: '',
          pageNumber: 1,
          pageSize: 10,
          cereInvestmentPlanningManagement: {
            implementationStartTime: '',
            implementationEndTime: ''
          }
        },
        secondData: {
          card: 'first', // 切换
        },
        currentPage: 1,
        total: 0,
        flag: false,
        pageSize: 10,
        tableData: [],
        msgid: '',
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        addAct: false, //新增框
        banAct: false, //详情
        steatqie: false, //编辑详情切换
        itemXiang: {}
      }
    },
    created() {
      this.getAll();
    },
    mounted() {},
    methods: {
      // 获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      lextStep(val) {
        this.stepNum = val;
      },
      // 查询全数据
      async getAll() {
        const res = await fangGetAll(this.pageindex);
        // let result = [];
        //      res.data.content.forEach(item => {
        //        item.cereResourceStrategy.forEach(strategy => {
        //          // 复制原始数据的部分字段
        //          let newItem = {
        //            planName: item.planName,
        //            cereInvestmentPlanningManagement: item.cereInvestmentPlanningManagement,
        //            auditStatus: item.auditStatus,
        //            // ...其他需要合并显示的字段
        //          };
        //          // 添加cereResourceStrategy中的字段
        //          newItem.cereResourceStrategy = strategy;
        //          result.push(newItem);
        //        })
        //      })
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      // 查询
      async onSubmit() {
        let forms = {
          planName: '',
          pageNumber: 1,
          pageSize: 10,
          cereInvestmentPlanningManagement: {
            implementationStartTime: '',
            implementationEndTime: ''
          }
        }
        if (this.formSel.planName != '') {
          forms.planName = this.formSel.planName
        }
        if (this.plan_Time.length != 0) {
          forms.cereInvestmentPlanningManagement.implementationStartTime = this.plan_Time[0]
          forms.cereInvestmentPlanningManagement.implementationEndTime = this.plan_Time[1]
        }
        const res = await fangGetAll(forms)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      // 详情编辑点击
      handleEditForm(item, ste) {
        console.log(item, ste)
        if (ste) {
          this.steatqie = true
        } else {
          this.steatqie = false
        }
        this.itemXiang = item
        this.banAct = true
      },
      bianClose(msg) {
        this.banAct = msg
        this.steatqie = false
        this.getAll()
      },
      // 新增
      addbuss() {
        this.addAct = true
      },
      childClose(msg) {
        this.addAct = msg
        this.getAll()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleClick() {},
      // 上传
      handlePreview(file) {
        console.log(file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      // 重置按钮
      resetting() {
        this.formSel = {
          planName: '',
          pageNumber: 1,
          pageSize: 10,
          cereInvestmentPlanningManagement: {
            implementationStartTime: '',
            implementationEndTime: ''
          }
        }
        this.plan_Time = []
        this.getAll()
      },
      delGuan(itme) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除 '),
          ]),
          showCancelButton: true,
          showClose: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'oe-dialog-btn',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              fangDel({
                id: itme.id
              }).then(res => {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getAll()
                done();
              })
            } else {
              done();
            }
          }
        })
      }
    }
  }
</script>
<style scoped>
  /deep/ .first-column-bg {
    background-color: #f4f4f5 !important;
  }
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
  }
  .tableBtn {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }
  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }
  .greens {
    color: #3f9b6a;
  }
  /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    position: relative;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3f9b6a;
  }
  :last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }
  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }
  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }
  .dialog_css {
    padding: 0px;
  }
  .dialog_xin {
    padding: 0px;
  }
  /deep/.el-dialog__body {
    padding: 0px;
  }
  /deep/ .el-dialog__header {
    background-color: #fff;
    padding: 0;
  }
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    line-height: 108px;
    /*text-align: center;*/
  }
  .avatar {
    width: 108px;
    height: 108px;
    display: block;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #3f9b6a;
    opacity: 1;
  }
  /deep/ .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  ::v-deep .el-tabs__item:hover {
    color: #3f9b6a;
    cursor: pointer;
    opacity: 1;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #389865;
  }
  /deep/ .el-table_2_column_13 {
    font-weight: 100;
  }
  ::v-deep .el-input__inner:focus {
    border: #3f9b6a 1px solid;
  }
  ::v-deep .el-input__inner:hover {
    border: #3f9b6a 1px solid;
  }
  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3f9b6a;
  }
  /* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */
  /* 修改未进行步骤的描述文字颜色 */
  ::v-deep .el-steps .el-step__description.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }
  /* 修改未进行步骤的图标颜色 */
  ::v-deep .el-steps .el-step__icon.is-text.is-wait {
    color: #999;
    /* 修改为你想要的颜色 */
  }
  /* 修改未进行步骤的边框色 */
  ::v-deep .el-steps .el-step__line.is-wait {
    border-color: #eee;
    /* 修改为你想要的颜色 */
  }
  ::v-deep .el-steps .is-process .el-step__line {
    background-color: #3f9b6a;
    /* 修改线的颜色 */
  }
  ::v-deep .el-steps .is-process .el-step__title {
    color: #fe7b6a;
    /* 修改进行中步骤的标题颜色 */
  }
  ::v-deep .el-steps .is-process .el-step__icon {
    color: #fff;
    /* 修改进行中步骤的图标颜色 */
    background: #3f9b6a;
    /* 修改进行中步骤图标的边框颜色 */
    border: 0px;
  }
  ::v-deep .el-step__icon-inner {
    line-height: 0;
  }
  /* 线条长度 */
  ::v-deep .el-step.is-vertical .el-step__line {
    top: 30px;
    height: 60px;
  }
  ::v-deep .moren {
    .el-input__inner {
      margin-top: 5px;
      padding: 0 20px;
    }
  }
  /deep/ .el-radio-group {
    margin-top: 11px;
  }
  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #3f9b6a;
    background: #3f9b6a;
  }
  ::v-deep .el-col {
    padding: 0 !important;
  }
  /deep/ .el-radio-group {
    width: 100%;
  }
  .radio-right-side {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  /deep/ .radio-right-side .el-radio__label {
    display: flex;
    align-items: center;
  }
  /deep/ .radio-right-side .el-radio__inner {
    order: 1;
  }
  /deep/ .radio-right-side .el-radio__input {
    display: flex;
    order: 2;
  }
  /deep/ .radio-right-side {
    &:hover {
      color: #000;
    }
  }
  ::v-deep .setup {
    .el-steps {
      justify-content: center;
    }
  }
  ::v-deep .el-step__head.is-finish {
    color: #c0c4cc;
    border-color: #c0c4cc;
  }
  ::v-deep .el-step__title.is-finish {
    color: #c0c4cc;
  }
  ::v-deep .el-step__title.is-process {
    color: #c0c4cc;
  }
  ::v-deep .el-tabs {
    width: 100%;
  }
  ::v-deep .setup {
    .el-step__main {
      margin-left: -17px;
    }
    .el-step__title.is-process {
      color: #3f9b6a;
    }
  }
  ::v-deep .el-pagination__jump {
    margin-top: 5px;
  }
  ::v-deep .linClass {
    .el-dialog__header {
      padding: 20px 20px 10px;
      font-size: 14px;
    }
  }
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }
  }
  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }
    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>