新增家庭模块

yz3456

2024-03-23 8a2bb76f1972728e985226cf85cfde34d54b5284

新增家庭模块

 ruoyi-ui/src/views/meeting/approve.vue

New file
@@ -0,0 +1,196 @@
<template>
  <div class="app-container">

    <el-backtop :bottom="150" :right="30">
      <el-button type="primary" circle class="el-icon-top"></el-button>
    </el-backtop>


    <h1 style="font-size:21px;padding-top:30px;display: flex;">
      <span>会议审批</span>
      <div class="button-container"></div>
      <div style="display: flex; align-items: center;">
<!--        <el-button size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 200px">
          <div class="form"><el-icon style="padding-right:100px;"></el-icon>
            <span class="text" style="width: 69px;height: 26px;font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">新申请</span>
          </div>
        </el-button> -->
      </div>
    </h1>

    <hr>

    <el-form :model="queryParams1">
      <el-row>
        <el-form-item label="" prop="people">
          <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 200px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table :data="tableData" border :header-cell-style="{ background: 'pink', fontSize: '13px', color: 'black' }"
      :row-class-name="tableRowClassName" :row-key="getRowId">
      <el-table-column label="标题" prop="title" sortable align="center">
        <template slot-scope="scope">{{ scope.row.title
      ? scope.row.title : '————' }}</template>
      </el-table-column>

      <el-table-column label="地点" prop="address" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.address ? scope.row.address : '————' }}</template>
      </el-table-column>

      <el-table-column label="可容纳人数" prop="capacity" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.capacity ? scope.row.capacity : '————' }}</template>
      </el-table-column>

      <el-table-column label="参与人数" prop="persons" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.persons ? scope.row.persons : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请人" prop="applicant" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.applicant ? scope.row.applicant : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请部门或家庭" prop="applyOrganization" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.applyOrganization ? scope.row.applyOrganization : '————' }}</template>
      </el-table-column>

      <el-table-column label="开始时间" prop="begin" sortable align="center">
        <template slot-scope="scope">{{ scope.row.begin
      ? scope.row.begin : '————' }}</template>
      </el-table-column>

      <el-table-column label="结束时间" prop="end" sortable align="center">
        <template slot-scope="scope">{{ scope.row.end ?
      scope.row.end : '————' }}</template>
      </el-table-column>

      <el-table-column label="是否摆放水牌" prop="card" sortable align="center">
        <template slot-scope="scope">{{ scope.row.card
      ? scope.row.card : '————' }}</template>
      </el-table-column>

      <el-table-column label="联系人" prop="name" sortable align="center">
        <template slot-scope="scope">{{ scope.row.name ?
      scope.row.name : '————' }}</template>
      </el-table-column>

      <el-table-column label="联系电话" prop="phone" sortable align="center">
        <template slot-scope="scope">{{ scope.row.phone
      ? scope.row.phone : '————' }}</template>
      </el-table-column>

      <el-table-column label="审批状态" prop="status" sortable align="center">
        <template slot-scope="scope">{{ scope.row.status
      ? scope.row.status : '————' }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <div class="button-container">
            <el-button size="mini" type="text">同意</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete">拒绝</el-button>
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">查看详情</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { title: '1', name: 'asasd', address: 'asdadsdasd', id: 1, age: '30' },
        { title: '2', name: 'qweqwqwe', address: 'qweqweqwe', id: 2, age: '30' },
        { title: '3', name: 'zxczxczxc', address: 'zxczxczcx', id: 3, age: '30' },
        { title: '4', name: 'fghfghfh', address: 'fghfghfgh', id: 4, age: '30' },
        { title: '5', name: 'rtyrtyrty', address: 'rtyrtyrty', id: 5, age: '30' },
        { title: '6', name: 'yuiyuiyui', address: 'yuiyuiyui', id: 6, age: '30' },
        { title: '7', name: 'hjkljkljk', address: 'jkljklhlkjl', id: 7, age: '30' },
      ],
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        happenTime: undefined,
        people: undefined,
        address: undefined,
        title: undefined,
        remark: undefined
      }
    }
  },
  methods: {

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "statistics-warning-row1";
      } else {
        return "statistics-warning-row";
      }
    },
    getRowId(row) {
      return row.id
    },

  }
}
</script>
<style scoped="">
.app-container {
  background-color: #FEF7FC;
  width: 100%;
  height: 100%;
}

/deep/ .el-table .statistics-warning-row {
  background: #E0EEFE;

}

/deep/ .el-table .statistics-warning-row1 {
  background: #FFEFF2;
}

.button-container {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
}

.el-table {
  border-radius: 14px 14px 14px 14px;
}

/* :deep(.el-table td:first-child) {
  border-left: 1px solid #e2ecfa;
  border-radius: 8px 0 0 8px;
  padding: 2px;
  z-index: 999;
  background: #fff;
}
:deep(.el-table td:last-child) {
  border-right: 1px solid #e2ecfa;
  border-radius: 0 8px 8px 0;
  z-index: 999;
  padding: 2px;
  background: #fff;
} */
</style>

 ruoyi-ui/src/views/meeting/index.vue

New file
@@ -0,0 +1,291 @@
<template>
  <div class="app-container">

    <el-backtop :bottom="150" :right="30">
      <el-button type="primary" circle class="el-icon-top"></el-button>
    </el-backtop>


    <h1 style="font-size:21px;padding-top:30px;display: flex;">
      <span>会议申请</span>
      <div class="button-container"></div>
      <div style="display: flex; align-items: center;">
        <el-button @click="newRequest" size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 200px">
          <div class="form"><el-icon style="padding-right:100px;"></el-icon>
            <span class="text" style="width: 69px;height: 26px;font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">新申请</span>
          </div>
        </el-button>
      </div>
    </h1>

    <hr>

    <el-form :model="queryParams1">
      <el-row>
        <el-form-item label="" prop="people">
          <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 200px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table :data="tableData" border :header-cell-style="{ background: 'pink', fontSize: '13px', color: 'black' }"
      :row-class-name="tableRowClassName" :row-key="getRowId">
      <el-table-column label="标题" prop="title" sortable align="center">
        <template slot-scope="scope">{{ scope.row.title
      ? scope.row.title : '————' }}</template>
      </el-table-column>

      <el-table-column label="地点" prop="address" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.address ? scope.row.address : '————' }}</template>
      </el-table-column>

      <el-table-column label="可容纳人数" prop="capacity" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.capacity ? scope.row.capacity : '————' }}</template>
      </el-table-column>

      <el-table-column label="参与人数" prop="persons" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.persons ? scope.row.persons : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请人" prop="applicant" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.applicant ? scope.row.applicant : '————' }}</template>
      </el-table-column>

      <el-table-column label="申请部门或家庭" prop="applyOrganization" sortable align="center">
        <template slot-scope="scope">{{
      scope.row.applyOrganization ? scope.row.applyOrganization : '————' }}</template>
      </el-table-column>

      <el-table-column label="开始时间" prop="begin" sortable align="center">
        <template slot-scope="scope">{{ scope.row.begin
      ? scope.row.begin : '————' }}</template>
      </el-table-column>

      <el-table-column label="结束时间" prop="end" sortable align="center">
        <template slot-scope="scope">{{ scope.row.end ?
      scope.row.end : '————' }}</template>
      </el-table-column>

      <el-table-column label="是否摆放水牌" prop="card" sortable align="center">
        <template slot-scope="scope">{{ scope.row.card
      ? scope.row.card : '————' }}</template>
      </el-table-column>

      <el-table-column label="联系人" prop="name" sortable align="center">
        <template slot-scope="scope">{{ scope.row.name ?
      scope.row.name : '————' }}</template>
      </el-table-column>

      <el-table-column label="联系电话" prop="phone" sortable align="center">
        <template slot-scope="scope">{{ scope.row.phone
      ? scope.row.phone : '————' }}</template>
      </el-table-column>

      <el-table-column label="状态" prop="status" sortable align="center">
        <template slot-scope="scope">{{ scope.row.status
      ? scope.row.status : '————' }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <div class="button-container">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">撤回</el-button>
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right" @click="handleCheck(scope.row)">查看详情</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>



    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

        <el-form-item label="时间" prop="timeSpan">
          <el-date-picker v-model="formData.timeSpan" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        open: false,
        title: "",
        tableData: [{
            title: '1',
            name: 'asasd',
            address: 'asdadsdasd',
            id: 1,
            age: '30'
          },
          {
            title: '2',
            name: 'qweqwqwe',
            address: 'qweqweqwe',
            id: 2,
            age: '30'
          },
          {
            title: '3',
            name: 'zxczxczxc',
            address: 'zxczxczcx',
            id: 3,
            age: '30'
          },
          {
            title: '4',
            name: 'fghfghfh',
            address: 'fghfghfgh',
            id: 4,
            age: '30'
          },
          {
            title: '5',
            name: 'rtyrtyrty',
            address: 'rtyrtyrty',
            id: 5,
            age: '30'
          },
          {
            title: '6',
            name: 'yuiyuiyui',
            address: 'yuiyuiyui',
            id: 6,
            age: '30'
          },
          {
            title: '7',
            name: 'hjkljkljk',
            address: 'jkljklhlkjl',
            id: 7,
            age: '30'
          },
        ],
        formData:{
          timeSpan: undefined,
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 10,
          happenTime: undefined,
          people: undefined,
          address: undefined,
          title: undefined,
          remark: undefined
        }
      }
    },
    methods: {

      newRequest(){
        this.open = true;
        this.title = "新申请"
      },
      cancel() {
        this.open = false;
        // this.reset();
      },
      submitDataScope() {
        console.log(this.formData.timeSpan)
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 == 0) {
          return "statistics-warning-row1";
        } else {
          return "statistics-warning-row";
        }
      },
      getRowId(row) {
        return row.id
      },

      // 修改
      handleUpdate(row) {
        const id = row.id;
        let jd = true

        this.$router.push({
          path:"/meeting/index/meetingInfo/" + id,
          query:{
            detail:jd
          }
        });
      },
      // 查看详细信息
      handleCheck(row){
        const id = row.id;
        this.$router.push("/meeting/index/meetingInfo/" + id);
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const Ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除数据项？').then(function() {
          return delSelfEconomy(Ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

    }
  }
</script>
<style scoped="">
  .app-container {
    background-color: #FEF7FC;
  }

  /deep/ .el-table .statistics-warning-row {
    background: #E0EEFE;
  }

  /deep/ .el-table .statistics-warning-row1 {
    background: #FFEFF2;
  }

  .button-container {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
  }

  .el-table {
    border-radius: 14px 14px 14px 14px;
  }

.form{
  background:center/11% no-repeat url('../../assets/icons/add1.png') ;

}
</style>

 ruoyi-ui/src/views/meeting/meetingInfo.vue

New file
@@ -0,0 +1,332 @@
<template>
  <div class="app-container" id="printable-content">
    <div class="form-header mt">
      <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;">
        <span>会议详情</span>
      </h1>
    </div>
    <div style="padding-left:15px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-position="left" label-width="160px">

        <el-container>

          <el-row :span="12">

            <el-cow>
              <el-form-item label="会议标题" prop="meetingTitle" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.meetingTitle" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="开始时间" prop="happenTime" label-width="80px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-date-picker v-model="formDat.happenTime" type="datetime" placeholder="选择日期时间" align="right"
                  :picker-options="pickerOptions" :style="{width: '100%'}">
                </el-date-picker>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="结束时间" prop="endTime" label-width="80px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-date-picker v-model="formDat.endTime" type="datetime" placeholder="选择日期时间" align="right"
                  :picker-options="pickerOptions" :style="{width: '100%'}">
                </el-date-picker>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="会议地点" prop="address" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.address" placeholder="请输入会议地点" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>

            <el-cow>
              <el-form-item label="会议室代码" prop="meetingID" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.meetingID" placeholder="请输入会议室代码" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="可容纳人数" prop="capacity" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.capacity" placeholder="请输入可容纳人数" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="参与人数" prop="attendance" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.attendance" placeholder="请输入参与人数" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="申请人" prop="applicant" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.applicant" placeholder="请输入申请人" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="家庭或部门" prop="familyName" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.familyName" placeholder="请输入申请家庭或部门" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="是否拜访水牌" prop="status" label-width="120px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-select v-model="formDat.status" placeholder="请选择 " clearable :style="{width: '100%'}"
                  :disabled="dsb">
                  <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="联系人" prop="name" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.name" placeholder="请输入联系人" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-cow>
            <el-cow>
              <el-form-item label="联系电话" prop="phone" label-width="90px"
                style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formDat.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-cow>
          </el-row>
        </el-container>

        <h4 class="form-header"> </h4>
        <el-form-item size="large">
          <el-button v-if="isShow" type="primary" @click="submitForm" :disabled="dsb">重新申请</el-button>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        cdi: "个人财产详细信息",
        udi: "个人财产信息详情",
        // 数据范围选项
        fot: ['.bmp', '.jpg', '.jpeg', '.png', '.tif', '.gif', '.pcx', '.tga', '.exif', '.fpx',
          '.svg', '.psd', '.cdr', '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.aw', '.WMF', '.webp', '.apng'
        ],

        fileList: [],
        fileList1: [],
        uploadFileList: [],
        uploadFileList1: [],
        fileListOther: [],
        dsb: true,
        btn: false,
        isShow: true,
        uploading: false,

        formDat: {
          id: undefined,
          happenTime: undefined,
          endTime: undefined,
          timeSpan: undefined,
          meetingTitle: undefined,
          address: undefined,
          meetingID: undefined,
          capacity: undefined,
          attendance: undefined,
          applicant: undefined,
          familyName: undefined,
          name: undefined,
          phone: undefined,
          url: "",
          status: undefined


        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        rules: {
          meetingTitle: [{
            required: true,
            message: '请输入会议标题',
            trigger: 'blur'
          }],
          happenTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '请输入是否注销',
            trigger: 'blur'
          }],
          isChange: [{
            required: true,
            message: '请输入变更/注销',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }],
          incomeName: [{
            required: true,
            message: '请输入收支类别',
            trigger: 'blur'
          }],
          timeLimit: [{
            required: true,
            message: '请输入期限',
            trigger: 'blur'
          }],
          location: [{
            required: true,
            message: '请输入存放位置',
            trigger: 'blur'
          }],
          propertyRight: [{
            required: true,
            message: '请输入实现难度',
            trigger: 'blur'
          }],

          remark: [{
            // required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
        },
        typeOptions: [{
            value: 1,
            label: '是',
          },
          {
            value: 0,
            label: '否',
          }
        ],
        typeOptions1: [{
            value: '变更',
            label: '变更',
          },
          {
            value: '注销',
            label: '注销',
          }
        ],
      }
    },
    created() {
      const id = this.$route.params && this.$route.params.id;
      let jd;
      if (this.$route.query.detail == 'true') {
        jd = this.$route.query.detail
        this.btn = jd
        this.dsb = !jd
        //    document.title = "修改个人财产详细信息";
        this.$route.meta.title = "会议详细信息"; //列表的名称
      } else {
        //   document.title = "个人财产详细信息";
        this.$route.meta.title = "会议详细信息"; //列表的名称
        this.btn = false;
        this.isShow = false
      }

      let _this = this
    },
    mounted() {},
    methods: {
      submitForm() {
        let ul = this.fileList.map(function(elem) {
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API, "")
        }).join(",")
        let uls = this.fileListOther.map(function(elem) {
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API, "")
        }).join(",")
        this.formData.url = ul + "," + uls

        this.$refs['elForm'].validate(valid => {
          alert(this.formData.status)
          if (valid) {
            if (this.formData.id != undefined) {
              updateSelfEconomy(this.formData).then(response => {
                this.$modal.msgSuccess("修改成功");
                // this.open = false;
                if (this.formData.status == 1)
                  this.formData.status = '是'
                else
                  this.formData.status = '否'
                this.btn = false
              });
            } else {
              this.$modal.msgSuccess("修改失败");
              if (this.formData.status == '是')
                this.formData.status = 1
              else
                this.formData.status = 0
            }
          }
        })
      },
    }
  }
</script>

<style scoped>
  .app-container {
    background-color: #FEF7FC;
  }

  .mt {
    position: relative;
  }

  .dt {
    display: block;

  }

  .pt {
    right: 10px;
    top: -3px;
    display: block;
    position: absolute;
  }

  .form {
    background: center/11% no-repeat url('../../assets/icons/form.png');
  }

  .hide /deep/ .el-upload--picture-card {
    display: none;
  }

  .form_item {
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
</style>

 ruoyi-ui/src/views/meeting/replay.vue

New file
@@ -0,0 +1,160 @@
<template>
    <div class="app-container" style="width: 1500px; height: 800px;">
        <!-- 回到顶部 -->
        <el-backtop :bottom="150" :right="30">
            <el-button type="primary" circle class="el-icon-top"></el-button>
        </el-backtop>

        <!-- 标题 -->
        <h1 style="font-size:21px;padding-top:30px;display: flex;">
            <span>直播回放</span>
        </h1>

        <hr>

        <!-- 搜索 -->
        <el-form :model="queryParams1">
            <el-row>
                <el-form-item label="" prop="people">
                    <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-form-item>
            </el-row>
        </el-form>

        <!-- <el-form :model="vList"> -->
        <el-row :gutter="25">
            <el-col :span="8" :style="margin">
                <div class="module">
                    <span class="span1">中秋家庭会议</span>
                    <span class="span2">2010-8-26 12:00</span>
                    <el-button class="huifang" type="primary" plain >回放</el-button>
                    <div class="tubiao"><i class="el-icon-view">10000</i></div>
                    <p class="author">发起者</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="module">
                    <span class="span1">中秋家庭会议</span>
                    <span class="span2">2010-8-26 12:00</span>
                    <el-button class="huifang" type="primary" plain >回放</el-button>
                    <div class="tubiao"><i class="el-icon-view">10000</i></div>
                    <p class="author">发起者</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="module">
                    <span class="span1">中秋家庭会议</span>
                    <span class="span2">2010-8-26 12:00</span>
                    <el-button class="huifang" type="primary" plain >回放</el-button>
                    <div class="tubiao"><i class="el-icon-view">10000</i></div>
                    <p class="author">发起者</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="module">
                    <span class="span1">中秋家庭会议</span>
                    <span class="span2">2010-8-26 12:00</span>
                    <el-button class="huifang" type="primary" plain >回放</el-button>
                    <div class="tubiao"><i class="el-icon-view">10000</i></div>
                    <p class="author">发起者</p>
                </div>
            </el-col>
        </el-row>
        <!-- </el-form> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryParams1: [],
            vList: [],

        }
    },
    methods: {

    }
}
</script>
<style scoped="">
.app-container {
    background-color: #FEF7FC;
/*   width: 2000px;
    height: 1500px; */
}

.button-container {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

.el-table {
    border-radius: 14px 14px 14px 14px;
}

.el-col {
    border-radius: 4px;
}

.module {
    width: 100%;
    height: 160px;
    background-color: rgb(255, 255, 255);
    border-color: red;
    border-radius: 6%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.span1 {
    float: left;
    font-size: 20px;
    margin-top: 5%;
    margin-left: 3%;
}

.span2 {
    float: right;
    font-size: 20px;
    margin-top: 5%;
    margin-right: 3%;
    margin-bottom: 50px;
}

.huifang{
    position: absolute ;
    bottom: 20px;
    right: 10px;
    font-size: 18px;
}

.tubiao{
    position: absolute;
    bottom: 20px;
    right: 100px;
}

.author{
    position: absolute;
    bottom: 5px;
    left: 100px;
}
</style>

 ruoyi-ui/src/views/meeting/statistics.vue

New file
@@ -0,0 +1,38 @@
<template>
    <div class="app-container">

      <el-backtop :bottom="150" :right="30">
        <el-button type="primary" circle class="el-icon-top"></el-button>
      </el-backtop>

      <h1 style="font-size:21px;padding-top:30px;display: flex;">
        <span>会议统计</span>
      </h1>

      <hr />

    </div>
  </template>

  <script>

  </script>
<style scoped>
  .el-table__row.statistics-warning-row {
    background: #E0EEFE;

  }
  .el-table__row.statistics-warning-row1 {
    background: #FFEFF2;

  }
  .el-table__cell {
    font-size: 14px; /* 设置字体大小 */
  }
  .button-container {
    display: inline-flex; /* 设置按钮容器为行内元素 */
  }
  .app-container {
    background-color: #FEF7FC;
  }
  </style>

 ruoyi-ui/src/views/meeting/webcast.vue

New file
@@ -0,0 +1,313 @@
<template>
  <div class="app-container" style="width:100%; height: 100%;">
    <!-- 回到顶部 -->
    <el-backtop :bottom="150" :right="30">
      <el-button type="primary" circle class="el-icon-top"></el-button>
    </el-backtop>

    <!-- 标题 -->
    <h1 style="font-size:21px;padding-top:30px;display: flex;">
      <span>直播</span>
      <div class="button-container"></div>
      <div style="display: flex; align-items: center;">
        <el-button size="mini" type="text" v-hasPermi="['person:information:memo']" style="margin-left: 200px">
          <div class="form" @click="newRequest"><el-icon style="padding-right:100px;"></el-icon>
            <span class="text" style="width: 69px;height: 26px;font-size: 16px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">直播申请</span>
          </div>
        </el-button>
      </div>
    </h1>

    <hr>

    <!-- 搜索 -->
    <el-form :model="queryParams1">
      <el-row>
        <el-form-item label="" prop="people">
          <el-input v-model="queryParams1.people" placeholder="请输入搜索内容" clearable style="width: 300px;
                   height: 35px;
                   text-align: left;
                   border-radius: 16px 16px 16px 16px;
                   opacity: 0.5;" @keyup.enter.native="handleQuery">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="0">
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">

          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="module">
          <div class="video">
            66666666
          </div>
          <span class="span1">中秋家庭会议</span>
          <div class="tubiao"><i class="el-icon-view">10000</i></div>
          <p class="author">发起者</p>
        </div>
      </el-col>
    </el-row>


    <!-- 直播申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="100px">
        <!--        <el-form-item label="获得时间" prop="happenTime">-->
        <!--          <el-input v-model="formDat.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" ></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="开始时间" prop="happenTime">
        </el-form-item> -->
        <el-form-item label="时间" prop="timeSpan">
          <el-date-picker v-model="formDat.timeSpan" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议标题" prop="meetingTitle">
          <el-input v-model="formDat.meetingTitle" placeholder="请输入会议标题" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="会议地点" prop="address">
          <el-input v-model="formDat.address" placeholder="请输入会议地点" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="会议室代码" prop="meetingID">
          <el-input v-model="formDat.meetingID" placeholder="请输入会议室代码" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="可容纳人数" prop="capacity">
          <el-input v-model="formDat.capacity" placeholder="请输入可容纳人数" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="参与人数" prop="attendance">
          <el-input v-model="formDat.attendance" placeholder="请输入参与人数" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="formDat.applicant" placeholder="请输入申请人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="申请家庭或部门" prop="familyName">
          <el-input v-model="formDat.familyName" placeholder="请输入申请家庭或部门" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-input v-model="formDat.name" placeholder="请输入联系人" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formDat.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDataScope">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
  export default {
    data() {
      return {
        queryParams1: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        formDat: {
          id: undefined,
          happenTime: undefined,
          endTime: undefined,
          timeSpan: undefined,
          meetingTitle: undefined,
          address: undefined,
          meetingID: undefined,
          capacity: undefined,
          attendance: undefined,
          applicant: undefined,
          familyName: undefined,
          name: undefined,
          phone: undefined,
          url: "",


        },

      }
    },
    methods: {
      newRequest() {
        // this.reset();
        this.open = true;
        this.title = "直播申请";
      },
      cancel() {
        this.open = false;
        // this.reset();
      },
      submitDataScope() {
        console.log(this.formDat.timeSpan)
      }

    }
  }
</script>
<style scoped="">
  .video {
    background-color: black;
    width: 90%;
    margin-top: 5%;
    margin-left: 5%;
    height: 70%;
    position: absolute;
  }

  .app-container {
    background-color: #FEF7FC;
    /*   width: 2000px;
    height: 1500px; */
  }

  .button-container {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
  }

  .el-table {
    border-radius: 14px 14px 14px 14px;
  }

  .el-col {
    border-radius: 4px;
  }

  .module {
    width: 250px;
    height: 250px;
    background-color: rgb(255, 255, 255);
    border-color: red;
    border-radius: 6%;
    margin-top: 20px;
    margin-bottom: 20px;
    /*    margin-left: 5px;
    margin-right: 5px; */
    position: relative;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .span1 {
    float: left;
    font-size: 15px;
    position: absolute;
    bottom: 40px;
    left: 80px;
  }

  .tubiao {
    position: absolute;
    bottom: 20px;
    right: 10px;
  }

  .author {
    position: absolute;
    bottom: 10px;
    left: 80px;
  }

  .form {
    background: center/11% no-repeat url('../../assets/icons/add1.png');

  }
</style>