soc_web/src/views/system/dept/extend.vue

<template>
  <div class="container" style="min-height: 100%; padding-bottom: 100px">
    <el-descriptions title="同步信息">
      <el-descriptions-item label="机构名称">kooriookami</el-descriptions-item>
      <el-descriptions-item label="机构简称">18100000000</el-descriptions-item>
      <el-descriptions-item label="机构组织类型">苏州市</el-descriptions-item>
      <el-descriptions-item label="部门机构电话">苏州市</el-descriptions-item>
      <el-descriptions-item label="部门机构地址">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="排序号">苏州市</el-descriptions-item>
      <el-descriptions-item label="是否可用"
        >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
      >
      <el-descriptions-item label="更新时间">苏州市</el-descriptions-item>
      <el-descriptions-item label="同步时间">苏州市</el-descriptions-item>
    </el-descriptions>
    <el-dropdown>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-descriptions title="补充基础信息"></el-descriptions>
    <div div-lc-mark>
      <el-form inline :model="formInline" class="demo-form-inline">
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div div-lc-mark>
      <el-switch
        v-model="value3"
        active-text
        inactive-text="是否自有产权"
      ></el-switch>
      <el-switch
        v-model="value3"
        active-text
        inactive-text="是否区域外"
      ></el-switch>
    </div>
    <div div-lc-mark>
      <el-table :data="tableData" style="width: 100%">
        <span>Span Element</span>
        <el-table-column
          :prop="propItem.prop"
          :label="propItem.label"
          v-for="propItem in propList"
          :key="propItem.prop"
        >
          <template v-slot="{ row }">
            <span v-if="!propItem.component">{{ row[propItem.prop] }}</span>
            <component
              v-else
              v-bind:is="propItem.component"
              :rowinfo="row"
            ></component>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-descriptions title="保安"></el-descriptions>
    <div div-lc-mark>
      <el-switch
        v-model="value3"
        active-text
        inactive-text="是否有保安"
      ></el-switch>
      <span>上传保安证</span>
      <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
      <div style="display: inline-block">
        <el-image
          style="width: 100px; height: 100px"
          :src="url4"
          fit="contain"
        ></el-image>
      </div>
    </div>
    <div div-lc-mark>
      <el-descriptions title="业务库设置"></el-descriptions>
    </div>
    <div div-lc-mark>
      <el-form-item label="业务库类型">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
        <span>值守方式</span>
        <el-radio-group v-model="radio">
          <el-radio :label="3">同楼异地值守</el-radio>
          <el-radio :label="6">远程值守</el-radio>
        </el-radio-group>
        <el-switch
          v-model="value3"
          active-text
          inactive-text="业务库出入口远程控制"
        ></el-switch>
      
    </div>
    <div>
      <el-dialog
        title="提示"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>这是一段信息</span>
        <span footer class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div div-lc-mark>
      <el-descriptions title="在行自助银行设置"></el-descriptions>
    </div>
    <div div-lc-mark>
      <el-switch
        v-model="value3"
        active-text
        inactive-text="是否有在行自助银行"
      ></el-switch>
      <span>在行式大堂设备</span>
      <div style="display: inline-block; width: 200px">
        <el-input-number
          v-model="num"
          controls-position="right"
          @change="handleChange"
          :min="1"
          :max="10"
        ></el-input-number>
      </div>
      <span>在行式穿墙设备</span>
      <div style="display: inline-block; width: 200px">
        <el-input-number
          v-model="num"
          controls-position="right"
          @change="handleChange"
          :min="1"
          :max="10"
        ></el-input-number>
      </div>
    </div>
    <div div-lc-mark>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          :prop="propItem.prop"
          :label="propItem.label"
          v-for="propItem in propList"
          :key="propItem.prop"
        >
          <template v-slot="{ row }">
            <span v-if="!propItem.component">{{ row[propItem.prop] }}</span>
            <component
              v-else
              v-bind:is="propItem.component"
              :rowinfo="row"
            ></component>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: [],
  components: {},
  data() {
    return {
      dialogVisible: false,
      formInline: {
        user: "",
        region: "",
      },
      num: 1,
      prop: "",
      propItem: "",
      propList: [
        {
          label: "序号",
          prop: "name",
        },
        {
          label: "标准",
          prop: "date",
        },
        {
          label: "达标日期",
          prop: "address",
        },
        {
          label: "操作",
          prop: "lc-component",
          component: "el-button",
        },
      ],
      radio: 3,
      row: "",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      url4: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      value3: true,
      showValue: "开启预览模式后,点击我显示预设逻辑",
      showText: "这里的值声明于预设JS代码",
    };
  },
  watch: {},
  computed: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  destroyed() {},
  methods: {
    request() {},
    handleChange(value) {},
    handleClose(done) {
      this.$confirm("确认关闭\uFF1F")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    hello() {
      alert("来自预设逻辑代码的问候");
    },
  },
  fillter: {},
};
</script>

<style scoped>
.demo-form-inline {
}
.dialog-footer {
}
.container {
}
</style>