real3d-portalsite/src/views/shareResources/components/ServiceDetails.vue

<template>
  <div>
    <div class="sm-panel sm-function-module-query" v-drag>
      <div class="sm-panel-header">
        <span>服务详情</span>
        <i class="el-icon-close" @click="closeBox"></i>
      </div>
      <div class="ServiceCon">
        <div class="detailList">
          <el-descriptions :column="1" border>
            <el-descriptions-item
              label="服务名称"
              label-class-name="my-label"
              content-class-name="my-content"
              >{{ detailObj.label }}</el-descriptions-item
            >
            <el-descriptions-item
              label="数据说明"
              content-class-name="my-content"
              :span="3"
              >客观地说广东省帝黑XXXXXXXX</el-descriptions-item
            >
            <el-descriptions-item label="数据所有者"
              >管理员</el-descriptions-item
            >
            <el-descriptions-item label="数据年份">XXXX</el-descriptions-item>
            <el-descriptions-item label="服务类型">{{
              detailObj.type
            }}</el-descriptions-item>
            <el-descriptions-item label="服务器类型">{{
              detailObj.serverType
            }}</el-descriptions-item>
            <el-descriptions-item label="服务发布时间"
              >XXX</el-descriptions-item
            >
            <el-descriptions-item label="联系人">XXX</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="btnCon">
          <span @click="dialogVisible = true">申请调用</span>
          <span><i @click="applicationRecord">申请记录</i></span>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label-width="0px">
            <el-col :span="12">
              <el-form-item prop="sqTime" label="申请时间">
                <!-- <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker> -->
                <el-input v-model="ruleForm.sqTime" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sqDepartmentBy" label="申请部门">
                <el-input v-model="ruleForm.sqDepartmentBy" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-col :span="12">
              <el-form-item prop="zymlBy" label="服务器类型">
                <el-input v-model="ruleForm.zymlBy" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="zymlTypeName" label="服务类型">
                <el-input v-model="ruleForm.zymlTypeName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="申请范围" prop="sqFw">
            <el-cascader
              :show-all-levels="false"
              :options="xzqTreeData"
              placeholder="行政区"
              :props="{ checkStrictly: true, expandTrigger: 'hover' }"
              clearable
              v-model="xzqTreeValue"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="申请理由" prop="sqReason">
            <el-input
              type="textarea"
              v-model="ruleForm.sqReason"
              placeholder="请输入申请理由"
            ></el-input>
          </el-form-item>
          <el-form-item label="系统名称" prop="systemName">
            <el-input
              v-model="ruleForm.systemName"
              placeholder="请输入使用数据服务的系统名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="调用IP" prop="callIp">
            <el-input
              v-model="ruleForm.callIp"
              placeholder="请输入使用数据服务的IP地址，多个用;隔开，最多支持3个"
            ></el-input>
          </el-form-item>
          <el-form-item label="预期截止时间" prop="sqDeadline">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.sqDeadline"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="附件材料" prop="attachment">
            <el-upload
              class="upload-demo"
              :on-change="handleChange"
              :auto-upload="false"
              :show-file-list="false"
              :file-list="fileList"
              :limit="1"
              accept=".zip"
            >
              <el-button class="upload-btn" icon="Upload" size="mini"
                >上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>

        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-table :data="tableData" style="width: 100%"  height="460">
          <el-table-column prop="sqTime" label="申请时间" show-overflow-tooltip > </el-table-column>
          <el-table-column prop="sqDepartmentBy" label="申请部门" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="zymlBy" label="数据服务" > </el-table-column>
          <el-table-column prop="zymlTypeName" label="服务类型"> </el-table-column>
          <el-table-column prop="sqFw" label="申请范围" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="sqReason" label="申请理由" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="systemName" label="系统名称" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="callIp" label="调用IP" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="sqDeadline" label="预期使用时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetXzqhTree } from "@/api/map";
import { ApplyResources, GetResources } from "../../../api/kfgx/gxzy";
import moment from "moment";
import { getInfo } from "@/api/login";
import user from "../../../store/modules/user";
export default {
  props: {
    detailObj: {
      type: Object,
    },
  },
  data() {
    return {
      page:1,
      total:0,
      xzqTreeValue: "",
      isDetailsShow: false,
      dialogVisible: false,
      dialogVisible2: false,
      xzqTreeData: [], //申请范围
      fileList: [], //文件
      ruleForm: {
        sqTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), //申请时间
        sqDepartmentBy: "海南省国土空间治理平台", //申请部门
        sqReason: "", //申请理由
        systemName: "", //系统名称
        sqFw: "", //申请范围
        zymlId:this.detailObj.id,
        zymlBy: this.detailObj.serverType, //数据服务
        zymlTypeName: this.detailObj.type, //数据类型
        callIp: "", //调用ip
        sqDeadline: "", //预期服务截止时间
        attachment: "", //附件材料
        sqDepartmentId:''
      },
      rules: {
        systemName: [
          {
            required: true,
            message: "请输入使用数据服务的系统名称",
            trigger: "blur",
          },
          { min: 1, message: "长度至少为一个字符", trigger: "blur" },
        ], //系统名称
        sqReason: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ], //申请理由
        sqFw: [
          { required: true, message: "请选择申请范围", trigger: "change" },
        ],
        callIp: [
          {
            required: true,
            message: "请输入使用数据服务的IP地址，多个用;隔开，最多支持3个",
            trigger: "blur",
          },
        ], //请输入使用数据服务的IP地址，多个用;隔开，最多支持3个
      },
      tableData: [
        {
          date: "2016-05-02",
          sqbm: "研发部",
          sjfw: "XXXXXX",
          fwlx: "iServer",
          sqfw: "吉阳区",
          sqly: "申请理由",
          xtmc: "系统名称",
          dyip: "调用ip",
          yqTime: "预期时间",
        },
      ],
      userMsg: null, //用户信息
    };
  },
  created() {
    this.getXzqTreeData();
  },
  mounted() {
    getInfo().then((res) => {
      this.userMsg = res.user;
      this.ruleForm.sqDepartmentBy = res.user.dept.deptName
      this.ruleForm.sqDepartmentId = res.user.deptId
    });
    
  },
  methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    closeBox() {
      this.$emit("updateParent", "isShowService", false);
    },
    //申请记录
    applicationRecord() {
      GetResources().then((res) => {
        this.tableData = res.rows
        this.total = res.total
        console.log(res,'//////');
        this.dialogVisible2 = true;
      });
    },
    getXzqTreeData() {
      GetXzqhTree().then((res) => {
        if (res.data.length > 0) {
          const list = res.data[0].children.filter((item) => {
            return item.label == "三亚市";
          });
          if (list.length > 0) {
            list[0].value = "4602";
            this.xzqTreeData = list[0];
          } else this.xzqTreeData = res.data;
          //   store.setRegionTree(this.xzqTreeData);
        }
      });
    },
    //上传文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
        // this.clearAll(false);
      }
      const formdata = new FormData();
      formdata.append("file", file.raw);
      formdata.append("fromType", 2);
      formdata.append("fromRoute", this.$route.path);
      ShapeUpload(formdata).then((res) => {
        if (res.success) {
          console.log("成功啦", res);
        }
      });
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.reset()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ApplyResources(this.ruleForm).then((res) => {
            this.$message.success("成功!");
            this.dialogVisible = false;
            this.reset()
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
      this.reset()
    },
    reset(){
      this.ruleForm= {
        sqTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), //申请时间
        sqDepartmentBy: "海南省国土空间治理平台", //申请部门
        sqReason: "", //申请理由
        systemName: "", //系统名称
        sqFw: "", //申请范围
        zymlId:this.detailObj.id,
        zymlBy: this.detailObj.serverType, //数据服务
        zymlTypeName: this.detailObj.type, //数据类型
        callIp: "", //调用ip
        sqDeadline: "", //预期服务截止时间
        attachment: "", //附件材料
        sqDepartmentId:this.userMsg.deptId
      }
    }
  },
  watch: {
    xzqTreeValue(val) {
      // console.log(val,'***************');
      this.ruleForm.sqFw = val[0];
    },
  },
};
</script>

<style lang="scss" scoped>
.ServiceCon {
  height: 760px;
  //   background-color: aliceblue;
  cursor: auto;

  .btnCon {
    width: 94%;
    height: 100px;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span {
      width: 200px;
      height: 48px;
      color: black;
      display: inline-block;
      line-height: 48px;
      text-align: center;
    }

    span:first-child {
      background-color: #81d3f8;
    }

    span:nth-child(2) {
      i {
        font-style: normal;
        color: #169bd5;
      }
    }
  }

  .detailList {
  }
}

/deep/ .el-icon-close:before {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: larger;
  font-weight: bold;

  &:hover {
    color: aqua;
  }
}

.sm-function-module-query {
  max-height: 800px !important;
}

.sm-panel {
  top: 38px;
}

/deep/ .el-icon-close:before {
  right: 2px;
  top: 0px;
}
/deep/ .el-descriptions-item__label.is-bordered-label {
  color: #fff;
  background-color: transparent;
}
/deep/ .el-descriptions__body {
  color: #fff;
  background-color: transparent;
}
</style>
<style>
.my-content {
  /* background: #fde2e2; */
  height: 46px !important;
}
</style>