cmanager/src/views/manage/applicationsRecord/index.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
      @on-load="onLoad"
    >
      <template slot="search" slot-scope="{row,size}">
        <div style="width: 500px;">
          <el-date-picker
            v-model="row.applTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="dateChange">
          </el-date-picker>
        </div>
      </template>
      <template slot="menu" slot-scope="{row}">
        <el-button size="small" type="text" @click="look(row)">查看</el-button>
      </template>
    </avue-crud>
    <!-- 新增、编辑 -->
    <el-drawer :title="drawerTitle" :visible.sync="viewDrawer" size="60%">
      <div>
        <p>申请信息：</p>
        <el-table
          :data="lookData"
          style="width: 100%;min-height: 120px !important;">
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="telephone"
            label="手机号码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="type"
            label="申请类型">
            <template slot-scope="{ row }">
              <span v-if="row.type==1">法律咨询</span>
              <span v-if="row.type==2">技能提升</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="applTime"
            label="申请时间">
            <template slot-scope="{ row }">
              <span>{{dateFormat(new Date(row.applTime), "yyyy/MM/dd")}}</span>
            </template>
          </el-table-column>
        </el-table>
        <p>申请内容：</p>
        <Tinymce v-if="viewDrawer" v-model="formOption.content" ref="tinymce"></Tinymce>
      </div>
    </el-drawer>
  </basic-container>
</template>

<script>
  import {dateFormat} from '@/util/date'
  import Tinymce from "@/components/Tinymce";
  import {getApplContentList} from '@/api/help/applicationsRecord/applicationsRecord'
  import {
    getAllContentCategoryFirstList,
    getAllContentCategorySecondList
  } from '@/api/help/classify'

  export default {
    name: "index",
    components: {
      Tinymce
    },
    mounted() {
      this.firstList()
    },
    data () {
      return {
        applTime: '',
        loading:false,
        viewDrawer:false,
        drawerTitle: '新增内容',
        formOption: {},
        query: {},
        rules: {
          name: [
            { required: true, message: '请输入内容标题', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ],
        },
        option: {
          height: "auto",
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          indexLabel: "序号",
          selection: false,
          viewBtn: false,
          addBtn: false,
          editBtn:false,
          delBtn: false,
          columnBtn: false,
          menuWidth: 300,
          labelWidth: 151,
          dialogClickModal: false,
          dialogType: "drawer",
          dialogFullscreen: true,
          column: [
            {
              label: "姓名",
              prop: "name",
              display: false,
              search: true
            },
            {
              label: "手机号码",
              prop: "telephone",
              display: false,
              search: true
            },
            {
              label: "申请类型",
              prop: "type",
              display: false,
              search: true,
              type: "tree",
              dicData: [
                {
                  name: '法律咨询',
                  type: 1
                },
                {
                  name: '技能提升',
                  type: 2
                }
              ],
              props: {
                label: "name",
                value: "type",
              },
            },
            {
              label: "申请时间",
              prop: "applTime",
              display: false,
              type:'datetime',
              searchSpan:8,
              searchRange:true,
              format: "yyyy/MM/dd",
            }
          ]
        },
        data: [],
        lookData: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 100,
        },
      }
    },
    methods: {
      dateFormat,
      dateChange(val){
        if(val){
          this.query.applTimeStart = val[0] + "00:00:00";
          this.query.applTimeEnd = val[1] + "23:59:59";
        }else{
          this.query.applTimeStart = '';
          this.query.applTimeEnd = '';
        }
      },
      firstList(){
        getAllContentCategoryFirstList().then(res => {
          this.first = res.data.data
        })
      },
      secondList (id) {
        getAllContentCategorySecondList (id).then(res => {
          this.formOption.secondId = ''
          this.second = res.data.data
        })
      },
      add () {
        this.formOption = {}
        this.drawerTitle = '新增内容'
        this.viewDrawer = true
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        })
      },
      look(row){
        this.drawerTitle = '查看'
        this.lookData = JSON.parse(JSON.stringify([row]))
        this.formOption = JSON.parse(JSON.stringify(row))
        this.viewDrawer = true
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formOption);
            this.viewDrawer = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.viewDrawer = false
      },
      /* 表格方法 */
      onLoad(page, params = {}) {
        this.loading = true;
        getApplContentList(
          page.currentPage,
          page.pageSize,
          Object.assign(this.query, params)
        ).then((res) => {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        });
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params,done) {
        console.log(params);
        if (params.applTime) {
          var val = JSON.parse(JSON.stringify(params.applTime))
          params.applTimeStart = val[0] + " 00:00:00";
          params.applTimeEnd = val[1] + " 23:59:59";
          delete params.applTime
        }
        this.query = params;
        console.log(this.query);
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      currentChange(val) {
        this.page.currentPage = val
      },
      sizeChange(val) {
        this.page.currentPage = 1
        this.page.pageSize = val
      },
      refreshChange () {
        this.page.currentPage = 1;
        this.onLoad(this.page)
      }
    }
  }
</script>

<style scoped>

</style>