普查列表页面

liyanqi

2022-11-01 e5b58707bae2d4e153560f51ed38859c530e9a66

 src/views/operate/rectification/surveyList/index.vue

@@ -6,17 +6,34 @@
        <main>
            <div class="mainHeader">
                <div class="add">
                    <el-button type="primary" icon="el-icon-plus">新增任务</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd()"
            >新增任务</el-button
          >
                </div>
                <div class="date-search">
                    <span>按天查询:</span>
                    <div class="mydate">
          <div class="block">
            <el-date-picker
              v-model="beginTime"
              type="date"
              placeholder="请选择开始日期"
            >
            </el-date-picker>
          </div>
          <span>——— ———</span>
          <div class="block">
            <el-date-picker
              v-model="endTime"
              type="date"
              placeholder="请选择结束日期"
            >
            </el-date-picker>
          </div>
          <!-- <div class="mydate">
                        <el-input placeholder="请输入开始时间"></el-input>
                        <div class="line">
                            ——— ———
                        </div>
            <div class="line">——— ———</div>
                        <el-input placeholder="请输入结束时间"></el-input>
                    </div>
          </div> -->
                </div>
                <div class="search">
                    <el-input placeholder="请输入标题或者任务编号"></el-input>
@@ -29,30 +46,43 @@
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
            background: '#06122c',
            'font-size': '12px',
            color: '#4b9bb7',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :row-class-name="tableRowClassName"
        >
          <!-- <el-table-column type="selection" width="55">
                    </el-table-column> -->
          <el-table-column label="任务编号" prop="num" min-width="10">
                    </el-table-column>
                    <el-table-column label="任务编号" prop="applicationName" min-width="10">
          <el-table-column prop="type" label="问题类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="问题类型" min-width="10">
          <el-table-column prop="bigclass" label="大类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="websiteUrl" label="大类" min-width="10">
          <el-table-column prop="subclass" label="小类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="小类" min-width="10">
          <el-table-column prop="street" label="街道" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="街道" min-width="10">
          <el-table-column prop="community" label="社区" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="社区" min-width="10">
          <el-table-column prop="task" label="任务描述" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="任务描述" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="上报时间" min-width="10">
          <el-table-column prop="reportTime" label="上报时间" min-width="10">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10">
                        <template slot-scope="scope">
                            <span @click="handleDelete(scope.row)">查看</span>
              <span @click="handleView(scope.row)" style="cursor: pointer"
                >查看</span
              >
                        </template>
                    </el-table-column>
                </el-table>
@@ -67,38 +97,82 @@
        </main>
        <footer>
            <!-- 创建弹窗 -->
            <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate"
                :before-close="handleClose">
                <createInterface />
      <el-dialog
        :visible.sync="dialogCreate"
        title="新增"
        width="45%"
        v-if="dialogCreate"
        :before-close="handleClose"
      >
        <createInterface @closeDialog="closeDialog" />
            </el-dialog>
            <!-- 查看弹窗 -->
            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'修改第三方接口':'查看第三方接口'" width="45%"
                v-if="dialogUpdate" :before-close="handleClose">
                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
      <el-dialog
        :visible.sync="dialogUpdate"
        :title="updateFlag ? '编辑' : '详情'"
        width="45%"
        v-if="dialogUpdate"
        :before-close="handleClose"
      >
        <viewInterface :updateFlag="updateFlag" :userInfo="userInfo" />
            </el-dialog>
        </footer>
    </div>
</template>
<script>
import createInterface from './components/createInterface';
import viewInterface from './components/viewInterface'
import createInterface from "./components/createInterface";
import viewInterface from "./components/viewInterface";
export default {
    components: {
        createInterface, viewInterface
    createInterface,
    viewInterface,
    },
    data() {
        return {
            tableData: [],
      tableData: [
        {
          num: 1234,
          type: "城管类事件",
          bigclass: "其他",
          subclass: "其他",
          street: "街道",
          community: "社区",
          task: "任务描述",
          reportTime: "2022-10-31 13:20",
        },
        {
          num: 1234,
          type: "城管类事件",
          bigclass: "其他",
          subclass: "其他",
          street: "街道",
          community: "社区",
          task: "任务描述",
          reportTime: "2022-10-31 13:20",
        },
        {
          num: 1234,
          type: "城管类事件",
          bigclass: "其他",
          subclass: "其他",
          street: "街道",
          community: "社区",
          task: "任务描述",
          reportTime: "2022-10-31 13:20",
        },
      ],
            search: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            date:'',
      userInfo: "",
      date: "",
      beginTime: "",
      endTime: "",
            // totalNum: 200,
            // pageSize: 10,
            // currentPage: 1,
        }
    };
    },
    created() {
        this.getUserList();
@@ -109,21 +183,21 @@
            const that = this;
            // const { currentPage, pageSize, search } = this;
            this.dialogCreate = false;
            this.$axios.get("sccg/system/portal/thirdApp/search").then(res => {
      this.$axios.get("sccg/system/portal/thirdApp/search").then((res) => {
                const { code, data } = res;
                if (code == 200) {
                    this.tableData = data;
                }
            })
      });
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
        return "warning-row";
            } else {
                return 'success-row';
        return "success-row";
            }
            return '';
      return "";
        },
        // 打开新增界面
        handleAdd() {
@@ -132,29 +206,37 @@
        // 创建弹窗关闭
        handleClose(done) {
            const that = this;
            this.$confirm('确认关闭？')
                .then(_ => {
      this.$confirm("确认关闭？")
        .then((_) => {
                    that.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        .catch((_) => {});
    },
    closeDialog({ flag, index }) {
      console.log(flag);
      index === 1 ? "" : "";
      this.dialogCreate = flag;
        },
        // 创建查看弹窗
        handleView(rowData) {
      console.log(rowData);
            this.userInfo = rowData;
            this.dialogUpdate = true;
        },
        // 删除第三方接口
        handleDelete({ id }) {
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
      this.$axios
        .delete("sccg/system/portal/thirdApp/delete", {
                params: {
                    id
                }
            }).then(res => {
                console.log(res);
            id,
          },
            })
        }
        .then((res) => {
          console.log(res);
        });
    },
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
@@ -170,8 +252,8 @@
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
  },
};
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
@@ -182,7 +264,6 @@
        justify-content: space-between;
        padding: 0 20px;
        color: #4b9bb7;

        &::v-deep .el-button {
            background-color: #eb5d01;
            border: none;
@@ -201,7 +282,9 @@
            color: #4b9bb7;
            background-color: #09152f;
            display: flex;
            .add,.search,.btn{
      .add,
      .search,
      .btn {
                flex:1;
            }
            .date-search{
@@ -258,7 +341,6 @@
    }

    footer {

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;