|
|
@@ -5,23 +5,292 @@
|
|
|
<span>服务详情</span>
|
|
|
<i class="el-icon-close" @click="isDetailsShow = false"></i>
|
|
|
</div>
|
|
|
- <div class="ServiceCon"></div>
|
|
|
+ <div class="ServiceCon">
|
|
|
+ <div class="detailList">
|
|
|
+ <el-descriptions title="自定义样式列表" :column="1" border>
|
|
|
+ <el-descriptions-item
|
|
|
+ label="服务名称"
|
|
|
+ label-class-name="my-label"
|
|
|
+ content-class-name="my-content"
|
|
|
+ >kooriookami</el-descriptions-item
|
|
|
+ >
|
|
|
+ <el-descriptions-item
|
|
|
+ label="数据说明"
|
|
|
+ content-class-name="my-content"
|
|
|
+ :span="3"
|
|
|
+ >客观地说广东省帝黑XXXXXXXX</el-descriptions-item
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="数据所有者"
|
|
|
+ >XXXXX</el-descriptions-item
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="数据年份">XXXX</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="服务类型">XXX</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>申请记录</i></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <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="date1" label="申请时间">
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ v-model="ruleForm.date1"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item prop="sqbm" label="申请部门">
|
|
|
+ <el-input v-model="ruleForm.sqbm"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="0px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item prop="sjfw" label="数据服务">
|
|
|
+ <el-input v-model="ruleForm.sjfw"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item prop="sjlx" label="数据类型">
|
|
|
+ <el-input v-model="ruleForm.sjlx"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="申请范围" prop="xzqTreeValue">
|
|
|
+ <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="sqly">
|
|
|
+ <el-input type="textarea" v-model="ruleForm.sqly"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="系统名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="调用IP" prop="dyip">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="预期截止时间" prop="yqjzsj">
|
|
|
+ <el-date-picker
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ v-model="ruleForm.yqjzsj"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件材料" prop="fjcl">
|
|
|
+ <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 type="primary" @click="submitForm('ruleForm')"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="resetForm('ruleForm')">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { GetXzqhTree } from "@/api/map";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- isDetailsShow:false,
|
|
|
+ isDetailsShow: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ xzqTreeData: [], //申请范围
|
|
|
+ fileList: [], //文件
|
|
|
+ ruleForm: {
|
|
|
+ name: "", //系统名称
|
|
|
+ date1: "", //申请时间
|
|
|
+ sqbm: "", //申请部门
|
|
|
+ sqly: "", //申请理由
|
|
|
+ sjfw: "", //数据服务
|
|
|
+ sjlx: "", //数据类型
|
|
|
+ // sqfw:'',//申请范围
|
|
|
+ xzqTreeValue: "", //申请范围
|
|
|
+ dyip: "", //调用ip
|
|
|
+ yqjzsj: "", //预期服务截止时间
|
|
|
+ fjcl: "", //附件材料
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "请输入活动名称", trigger: "blur" },
|
|
|
+ { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ sqly: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
|
|
|
+ xzqTreeValue: [
|
|
|
+ { required: true, message: "请选择申请范围", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getXzqTreeData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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.$confirm('确认关闭？')
|
|
|
+ // .then(_ => {
|
|
|
+ // done();
|
|
|
+ // })
|
|
|
+ // .catch(_ => {});
|
|
|
+ },
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert("submit!");
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.ServiceCon {
|
|
|
- height: 560px;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.my-content {
|
|
|
+ /* background: #fde2e2; */
|
|
|
+ height: 46px !important;
|
|
|
}
|
|
|
</style>
|
