admin-cms/src/layout/technicalService/technicalServiceList.vue

<template>
  <div id="technicalServiceList">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="search">
          <!--<el-col :span="5">
          <span>筛选条件：</span>
          <el-select v-model="search.publish_state" placeholder="请选择发布状态">
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-col>-->
          <el-col :span="4">
            <span>输入条件：</span>
            <el-input v-model="search.title" :placeholder="placeholder" class="input"></el-input>
          </el-col>
          <!--<el-col :span="7">
            <span>时间选择：</span>
            <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-col>-->
          <el-col :span="8">
            <el-button class="btnSearch" @click="toQuery">查询</el-button>
            <el-button class="btnSearch qing" @click="toClear">清空</el-button>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table
                  ref="tableData"
                  :data="tableData"
                  tooltip-effect="dark"
                  :default-sort="{ prop: 'date', order: 'descending' }"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
          >
            <!--<el-table-column type="selection" align="center"> </el-table-column>-->
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column property="title" label="名称" align="center"> </el-table-column>
            <!--<el-table-column property="service" label="服务" align="center"> </el-table-column>-->
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                                <span> <el-image v-if="scope.row.image" :src="scope.row.image" style="height:20px;width:20px "
                                                 @click="showImage(scope.row.image)"></el-image></span>
              </template>
            </el-table-column>
            <el-table-column property="contact" label="联系人" align="center"> </el-table-column>
            <el-table-column property="phone" label="联系电话" align="center"> </el-table-column>
            <el-table-column property="email" label="电子邮箱" align="center"> </el-table-column>
            <el-table-column label="操作" align="center" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="edit" icon="el-icon-edit"
                           @click="$router.push({ path: '/technicalService/detail', query: { id: scope.row.id } })"></el-button>
                <el-button size="mini" type="text" class="delete" icon="el-icon-delete"
                           @click.prevent="deleteRow(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size.sync="limit"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            >
            </el-pagination>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
    >
      <el-image :src="elImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'technicalServiceList',
    props: {
      tableData: null,
      total: null,
      type: null,
    },
    components: {},
    data: () => ({
      placeholder: '请输入名称',
      search: {},
      currentPage: 1,
      limit: 10,
      dialogVisible: false,
      elImage: '',
    }),
    created() {
    },
    computed: {
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteRow(id) {
        this.$set(this, `currentPage`, 1);
        this.$emit('deleteRow', {id: id, skip: 0, limit: this.limit,type:this.type, ...this.search});
      },
      handleSizeChange(val) {
        this.$set(this, `currentPage`, 1);
        this.$emit('select', {skip: 0, limit: val,type:this.type, ...this.search});
      },
      handleCurrentChange(val) {
        this.$emit('select', {skip: (val - 1) * this.limit, limit: this.limit,type:this.type, ...this.search});
      },
      toQuery() {
        this.$set(this, `currentPage`, 1);
        this.$emit('select', {skip: 0, limit: this.limit,type:this.type, ...this.search});
      },
      toClear() {
        let keys = Object.keys(this.search);
        for (const key of keys) {
          this.$set(this.search, `${key}`, '');
        }
      },
      showImage(image) {
        if(image){
          this.$set(this, `elImage`, image);
          this.$set(this, `dialogVisible`, true);
        }else{
          this.$set(this, `dialogVisible`, false);
        }
      },
      getDate(val) {
        if(val){
          return this.format(new Date(Number(val)),'yyyy年MM月dd');
        }
        return '';
      },
      format(date,formatStr){
        formatStr=formatStr.replace(/yyyy|YYYY/,date.getFullYear());
        formatStr=formatStr.replace(/MM/,(date.getMonth()+1)>9?(date.getMonth()+1).toString():'0' + (date.getMonth()+1));
        formatStr=formatStr.replace(/dd|DD/,date.getDate()>9?date.getDate().toString():'0' + date.getDate());
        return formatStr;
      },
      publish(row){
        if(row.publish_state === '1'){
          this.$message.error('已发布');
          return ;
        }
        this.$emit('publish', {row:row,skip: (this.currentPage - 1) * this.limit, limit: this.limit, ...this.search});
  },
    },
  };
</script>

<style lang="less" scoped>
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: red;
    border-color: red;
  }

  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: red;
    border-color: red;
  }

  /deep/ .el-table th {
    background-color: #f5f6fa;
    padding: 8px 0;
  }

  /deep/ .el-table td {
    padding: 11px 0;
  }

  .other {
    color: #f36302;
  }

  .view {
    color: #f36302;
  }

  .edit {
    color: #2ccc02;
  }

  .delete {
    color: #e9021d;
  }

  /deep/ .el-pagination {
    padding: 26px 20px;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: red;
  }

  .input {
    width: 150px;
  }

  /deep/ .el-input__inner {
    height: 35px;
    line-height: 35px;
  }

  .btnSearch {
    width: 80px;
    height: 34px;
    background: rgba(233, 2, 29, 1);
    border-radius: 4px;
    padding: 0;
    color: #fff;
  }

  .qing {
    background: rgba(185, 185, 185, 1);
  }

  .top {
    height: 50px;
    margin: 0 0 10px 0;
  }

  .search {
    background: #ffffff;
    width: 97%;
    height: 35px;
    margin: 20px;
    margin-left: 0px;
  }

  .list {
    padding: 0 20px;
  }
</style>