任务中心

liukangdong

2024-05-16 34413216b5fe45d05d473f27ec6cb640a79e0c58

任务中心

 admin/package-lock.json

@@ -1876,63 +1876,6 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1617826515595&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1940,28 +1883,6 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -13937,6 +13858,87 @@
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },
    "vue-property-decorator": {
      "version": "8.5.1",
      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",

 admin/src/assets/style/style.scss

@@ -20,6 +20,7 @@
    margin: 0;
    overflow: scroll;
    overflow: hidden;
    font-size: 14px;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
@@ -124,3 +125,157 @@
    top: 1px;
  }
}

.main_app {
  background-color: #fff;
  padding: 30px;
  margin: 0 16px;
}
/** åŸºç¡€é€šç”¨ **/
 // å¤§å° å¤–边距
 .flex1{
  flex: 1;
 }
 .w100{
  width: 100px !important;
 }
 .w120{
  width: 120px !important;
 }
 .w200{
  width: 200px !important;
 }
 .w300{
  width: 300px;
 }
 .w400{
  width: 400px !important;
 }
 .pt5 {
  padding-top: 5px;
}

.pr5 {
  padding-right: 5px;
}

.pb5 {
  padding-bottom: 5px;
}

.mt5 {
  margin-top: 5px;
}

.mr5 {
  margin-right: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb8 {
  margin-bottom: 8px;
}

.ml5 {
  margin-left: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.ml10 {
  margin-left: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}
.mt30 {
  margin-top: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mb30 {
  margin-bottom: 30px;
}
.pr20{
  padding-right: 20px;
}

.ml30 {
  margin-left: 30px;
}
.h24{
  height: 24px;
  line-height: 24px;
}

// flex布局
.df{
  display: flex;
}
.df_ac{
  display: flex;
  align-items: center;
  p {
    margin: 0;
  }
}
.df_sb{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// æ–‡æœ¬æ ·å¼
.underline{
  text-decoration: underline;
}
.fs12{
  font-size: 12px;
}
.fs_12{
  font-size: 12px;
}
.fs_16{
  font-size: 16px;
}
.fs_18{
  font-size: 18px;
}
.fs_24{
  font-size: 24px;
}
.text{
  color: #333333;
}
.tac{
  text-align: center;
}

 admin/src/components/common/GlobalWindow.vue

@@ -21,7 +21,7 @@
    <div v-if="withFooter" class="window__footer">
      <slot name="footer">
        <el-button @click="confirm" :loading="confirmWorking" type="primary">{{text}}</el-button>
        <el-button @click="close">返回</el-button>
        <el-button @click="close">{{ backText }}</el-button>
      </slot>
    </div>
  </el-drawer>
@@ -45,6 +45,10 @@
      type: String,
      default: '确定'
    },
    backText: {
      type: String,
      default: '返回'
    },
    // ç¡®è®¤æŒ‰é’®loading状态
    confirmWorking: {
      type: Boolean,

 admin/src/components/common/QueryForm/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
import QueryForm from './queryForm.vue'

export default QueryForm

 admin/src/components/common/QueryForm/queryForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
<template>
  <div class="doumee-filter">
    <el-form inline label-suffix="：" @submit.native.prevent>
      <template v-for="(item, index) in queryFormConfig.formItems">
        <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
          <el-input v-model="searchForm[item.filed]"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label" class="w200"
            @change="changeForm(item.filed)" @keyup.enter.native="handlekeyup(item.keyup || false)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label"
          :label="item.label">
          <el-input v-model="searchForm[item.filedStrt]"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.start" style="width: 150px" />
          <div class="date-division-line" style="margin-left: 10px;margin-bottom: 0;">~</div>
          <el-input v-model="searchForm[item.filedEnd]"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.end" style="width: 150px" />
        </el-form-item>
        <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
          <el-select v-model="searchForm[item.filed]" :filterable="item.filterable || true"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label" class="w200"
            @change="changeForm(item.filed)">
            <el-option v-for="opt, i in item.options" :key="i" :value="item.valueCode ? opt[item.valueCode] : opt.value"
              :label="item.labelCode ? opt[item.labelCode] : opt.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '日期'">
          <el-date-picker v-model="searchForm[item.filed]" type="date" value-format="yyyy-MM-dd" class="w200"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder || '请选择日期'" :picker-options="item.pickerOptions || {}"
            @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || ''">
          <el-date-picker v-model="searchForm[item.filed]" value-format="yyyy-MM-dd" type="daterange"
            range-separator="至"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :start-placeholder="item.start || ''" :end-placeholder="item.end || ''"
            :picker-options="item.pickerOptions || {}" class="w400" @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '选择时间'">
          <el-time-picker v-model="searchForm[item.filed]" is-range range-separator="至" format="HH:mm"
            value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" class="w400"
            @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '选择日期'">
          <el-date-picker v-model="searchForm[item.filed]" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            :picker-options="item.pickerOptions || pickerOptions" range-separator="至"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :start-placeholder="item.start || '开始时间'" :end-placeholder="item.end || '结束时间'" class="w400"
            @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
          <slot :name="item.filed" />
        </el-form-item>
      </template>
      <!-- æ“ä½œ -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button v-if="showQk" @click="clear">重置</el-button>
        <slot name="btns" />
        <template v-if="queryFormConfig.formItems.length > listLength">
          <el-button v-if="!showZk" type="text" @click="zkBtn">展开<i
              class="el-icon-caret-bottom primaryColor" /></el-button>
          <el-button v-if="showZk" type="text" @click="zkBtn">收起<i class="el-icon-caret-top primaryColor" /></el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    showQk: {
      type: Boolean,
      default: true
    },
    listLength: {
      type: Number,
      default: 3
    },
    queryFormConfig: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      showZk: false,
      pickerOptions: {
        shortcuts: [{
          text: '近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近60天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '近90天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 89)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          var curDate = new Date(new Date().toLocaleDateString()).getTime()
          var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1)
          return time.getTime() > preDate
        }
      }
    }
  },
  emits: ['input', 'handleQuery', 'clear'],
  computed: {
    searchForm: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery')
    },
    handlekeyup(pd) {
      if (pd) {
        this.$emit('handleQuery')
      }
    },
    changeForm(filed) {
      this.$emit('changeForm', filed)
    },
    zkBtn() {
      this.showZk = !this.showZk
      this.$emit('zkBtn', this.zk)
    },
    clear() {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
.doumee-filter {
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  background-color: #fff;
  border-bottom: 10px solid #f7f8f9;
  margin: 0 -30px;
  padding: 0 0 0 30px;

  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
    height: 36px;

    .el-input__inner {
      /* color: $textColor; */
      padding: 0 16px;
    }
  }

  .el-date-editor {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;

    .el-input__inner {
      padding-left: 30px;
    }
  }

  .el-button {
    margin-bottom: 20px;
  }

  .el-form-item {
    margin-bottom: 20px;
    margin-right: 20px;

    .el-input,
    .el-select,
    .el-date-editor {
      margin-right: 0;
    }

    .el-input,
    .el-select,
    .el-date-editor,
    .el-button {
      margin-bottom: 0;
    }
  }
}
</style>

 admin/src/views/task/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,86 @@
<template>
  <div class="main_app">
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" />
    <!--  -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="待处理" name="0"></el-tab-pane>
      <el-tab-pane label="已处理" name="1"></el-tab-pane>
      <el-tab-pane label="我发起的" name="2"></el-tab-pane>
      <el-tab-pane label="抄送我的" name="3"></el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" :data="list" stripe row-key="id" default-expand-all>
      <el-table-column prop="name" label="任务类型" min-width="100"></el-table-column>
      <el-table-column prop="name" label="提交人" min-width="80"></el-table-column>
      <el-table-column prop="companyNamePath" label="提交时间" min-width="100"></el-table-column>
      <el-table-column label="操作" width="230" fixed="right">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleDetail(row)" v-permissions="['business:company:update']">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
    <TaskDetail v-if="isShowDetail" ref="DetailRef" />
  </div>
</template>

<script>
import Pagination from '@/components/common/Pagination'
import QueryForm from '@/components/common/QueryForm'
import TaskDetail from './taskDetail.vue'
export default {
  components: {
    TaskDetail,
    QueryForm,
    Pagination
  },
  data () {
    return {
      isShowDetail: false,
      activeTab: '0',
      filters: {},
      queryFormConfig: {
        formItems: [
          {
            filed: 'taskType',
            type: 'select',
            label: '任务类型',
            options: []
          },
          {
            filed: 'status',
            type: 'daterange',
            label: ''
          }
        ],
        online: true
      },
      loading: false,
      sorting: false,
      searchForm: {
        // type: 1
      },
      pagination: {
        capacity: 10,
        page: 1
      },
      list: [{}],
      total: 0
    }
  },
  methods: {
    handleDetail () {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.isShowModal = true
      })
    },
    getList (page) { },
    clear () { },
    handleSizeChange (capacity) {
      this.pagination.capacity = capacity
    }
  }
}
</script>

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

 admin/src/views/task/taskDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,308 @@
<template>
  <GlobalWindow
    :title="title"
    text="同意"
    backText="拒绝"
    :visible.sync="isShowModal"
    @confirm="confirm"
  >
    <div class="modal_wrap">
      <div class="modal_content">
        <div class="header">
          <div class="left">
            <div class="h1">访客预约</div>
            <div class="time">提交时间：</div>
          </div>
          <div class="right">待审核</div>
        </div>
        <div class="info">
          <div class="title">访客预约信息</div>
          <div class="list">
            <div class="item">
              <div class="label">被访人</div>
              <div class="value"></div>
            </div>
            <div class="item">
              <div class="label">来访时间</div>
              <div class="value"></div>
            </div>
            <div class="item">
              <div class="label">来访事由</div>
              <div class="value"></div>
            </div>
            <div class="item">
              <div class="label">随行车辆</div>
              <div class="value"></div>
            </div>
            <div class="item">
              <div class="label">施工人员</div>
              <div class="value"></div>
            </div>
            <div class="item">
              <div class="label">施工内容</div>
              <div class="value"></div>
            </div>
          </div>
        </div>
        <div class="table_info">
          <div class="title">访客信息</div>
          <el-table :data="detail.datalist" border fit>
            <el-table-column label="姓名" prop="" min-width="150">
              <template slot-scope="{ row }">
                <div class="name_wrap">
                  <image src="" class="avatar" mode="" />
                  <div class="content">
                    <div class="line">
                      <div class="name">李东</div>
                      <div class="tag">申请人</div>
                    </div>
                    <div class="line placeholder9">1888888</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="性别" prop="" min-width="40" />
            <el-table-column label="证件类型" prop="" min-width="80" />
            <el-table-column label="证件号码" prop="" min-width="120" />
            <el-table-column label="公司名称" prop="" min-width="120" />
            <el-table-column label="人脸照片" prop="" min-width="80" />
          </el-table>
        </div>
      </div>
      <div class="side">
        <div class="side_title">审批流程</div>
        <div class="list">
          <div class="item">
            <div class="separate"></div>
            <div class="info">
              <i class="el-icon-success icon"></i>
              <img src="" class="avatar" alt="" />
              <div class="content">
                <div class="line">
                  <div class="name">刘某刘某</div>
                  <div class="time">2020-02-02 12:20</div>
                </div>
                <div class="line">
                  <div class="company">中国移动有限公司</div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <!-- <div v-if="" class="separate"></div> -->
            <div class="info">
              <i class="el-icon-success icon"></i>
              <img src="" class="avatar" alt="" />
              <div class="content">
                <div class="line">
                  <div class="name">刘某刘某</div>
                  <div class="time">2020-02-02 12:20</div>
                </div>
                <div class="line">
                  <div class="company">
                    ä¸­å›½ç§»åŠ¨æœ‰é™å…¬å¸( <span class="status">已同意</span> )
                  </div>
                </div>
              </div>
            </div>
            <div class="remark">提交约好的</div>
          </div>
        </div>
      </div>
    </div>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
export default {
  components: { GlobalWindow },
  data() {
    return {
      title: '访客预约详情',
      isShowModal: false,
      detail: {
        datalist: [{}]
      }
    }
  },
  methods: {
    confirm() {
      console.log('--')
    }
  }
}
</script>

<style lang="scss" scoped>
.modal_wrap {
  display: flex;
  height: 100%;
  .modal_content {
    flex: 1;
    padding: 0px 30px;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;

    .title {
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      margin-bottom: 20px;
      margin-top: 30px;
    }

    .info {
      .list {
        display: flex;
        flex-wrap: wrap;

        .item {
          display: flex;
          width: 40%;
          margin-bottom: 20px;
          &:nth-of-type(2n) {
            width: 60%;
          }

          .label {
            color: #888888;
            width: 68px;
          }

          .value {
            color: #111111;
          }
        }
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 30px;
      margin: 0 -30px;
      border-radius: 8px 8px 0 0;
      background: linear-gradient(to right, #f2f6fe, #cadffa);

      .h1 {
        font-weight: 600;
        font-size: 22px;
        color: #111111;
        margin-bottom: 8px;
      }

      .time {
        font-size: 14px;
        color: #999999;
      }

      .right {
        height: 40px;
        font-size: 16px;
        color: #ffffff;
        line-height: 40px;
        padding: 0 20px;
        background: #207ff7;
        box-shadow: 4px 4px 0px 0px rgba(32, 127, 247, 0.16);
        border-radius: 16px 0px 16px 0px;
      }
    }
    .table_info {
      .name_wrap {
        display: flex;
        align-items: center;
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 12px;
        }
        .content {
          .line {
            display: flex;
          }
          .tag {
            color: #b2cbf9;
            border: 1px solid #b2cbf9;
            padding: 0px 4px;
            border-radius: 4px;
            margin-left: 6px;
          }
        }
      }
    }
  }

  .side {
    height: 100%;
    width: 420px;
    background: #ffffff;
    border-left: 20px solid #f7f7f7;
    .list {
      .item {
        padding: 8px 0;
        position: relative;
        .separate {
          position: absolute;
          border-left: 2px dashed #cccccc;
          left: 51px;
          height: calc(100% - 24px);
          top: 46px;
        }
        .info {
          display: flex;
          align-items: center;
          margin-left: 40px;
          .icon {
            position: relative;
            z-index: 11;
            color: #53b76f;
            font-size: 24px;
          }
          .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 12px 0 16px;
            border: 1px solid;
          }
          .content {
            flex: 1;
            .line {
              display: flex;
              justify-content: space-between;
              align-content: center;
              margin-bottom: 6px;
              .name {
                font-weight: 600;
                font-size: 16px;
                color: #111111;
              }
              .time {
                color: #888888;
              }
              .company {
                font-size: 13px;
                color: #888888;
                .status {
                  color: #00ba67;
                }
              }
            }
          }
        }
        .remark {
          background: #f7f7f7;
          border-radius: 4px;
          padding: 13px 15px;
          color: #666666;
          margin-left: 120px;
        }
      }
    }
  }
}
</style>