jwybs-web/src/views/fill/index.vue

<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="填报查看" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex">
            <div style="margin-right:10px">
              <DatePicker v-model="select.year" @on-change="changeYear" type="year" placeholder="选择年份" style="width: 150px" />
            </div>
            <div style="margin-right:10px">
              <Select v-model="select.department_id" placeholder="请选择部门" style="width:150px">
                <Option v-for="item in depList"
                :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div>
            <div  style="margin-right:10px">
              <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 150px" />
            </div>

            <Button
              type="primary"
              @click="$refs['xyTable'].getTableData(true)"
            >查询</Button
            >
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table ref="xyTable"
        :table-item="table"
        :auths="auths_auth_mixin"
        :action="index">
        <template v-slot:btns>
          <el-table-column align='center' fixed="right" label="操作" width="100" header-align="center">
            <template slot-scope="scope">
              <div  style="display: flex;">
                <Button size="small" type="primary" @click="$router.push(`/fill/formindex?id=${scope.row.id}`)">查看</Button>
              </div>

            </template>
          </el-table-column>
        </template>
    </xy-table>

  </div>
</template>

<script>
import { index,destroy } from "@/api/person"
import { authMixin } from "@/mixin/authMixin";
import headerContent from "@/components/LxHeader/XyContent.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import { listCommondepartment } from "@/api/common";
export default {
  mixins: [authMixin],
  components: {
    headerContent,
    LxHeader,
  },
  data() {
    return {
      select:{
        year:'',
        department_id:'',
        keyword:''
      },
      depList:[],
      table: [
        {
          type: "index",
          width: 46,
          label: "序号"
        },
        {
          prop: "name",
          label: "姓名",
          width:120
        },
        {
          prop: "department.name",
          label: "部门",
          width: 120
        },
        {
          prop: "category_type.title",
          label: "清单类型",
          width: 120
        },
        {
          prop: "start_date",
          label: "开始填报日期",
          width: 160
        },
        {
          prop: "end_date",
          label: "结束填报日期",
          width: 160
        },
        {
          prop: "status",
          label: "填报状态",
          width: 160,
          customFn: (row) => {
            return ( <el-switch
              v-model={row.is_active}
              on = {
                {
                  ['change']: (e) => {

                  }
                }
              }></el-switch>)
            }
        },
        // {
        //   prop: "position",
        //   label: "职位"
        // },
        // {
        //   prop: "is_active",
        //   label: "是否在职",
        //   width: 80,
        //   formatter:(v1,v2,val) => {
        //     return val ? "在职" : "离职"
        //   }
        // },
        {
          prop: "username",
          label: "用户名"
        },

        {
          width: 80,
          prop: "myindex",
          label: "排序"
        }
      ]
    }
  },
  created(){
    this.getDep()
  },
  methods: {
    index,destroy,
    getList(){},
    changeYear(){

    },
    getDep(){
      listCommondepartment().then(res => {
        // res.data.map(item=>{
        //   item.name=item.name+"("+item.abbr+")"
        // })
        this.depList = res.data
      })
    }
  },
  computed: {},
}
</script>

<style scoped lang="scss">
</style>