From e5b58707bae2d4e153560f51ed38859c530e9a66 Mon Sep 17 00:00:00 2001 From: liyanqi <15181887205@163.com> Date: 星期二, 01 十一月 2022 14:31:21 +0800 Subject: [PATCH] 普查列表页面 --- src/views/operate/rectification/surveyList/components/createInterface/index.vue | 550 ++++++++++-------- src/views/operate/rectification/surveyList/components/viewInterface/index.vue | 488 +++++++++-------- src/views/operate/rectification/surveyList/index.vue | 608 ++++++++++++--------- 3 files changed, 908 insertions(+), 738 deletions(-) diff --git a/src/views/operate/rectification/surveyList/components/createInterface/index.vue b/src/views/operate/rectification/surveyList/components/createInterface/index.vue index 1be774b..57dd333 100644 --- a/src/views/operate/rectification/surveyList/components/createInterface/index.vue +++ b/src/views/operate/rectification/surveyList/components/createInterface/index.vue @@ -1,260 +1,322 @@ <template> - <div class="createmyInterface"> - <main> - <div class="mainContent"> - <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface" - :rules="createmyInterfaceRules" label-position="right"> - <!-- 搴旂敤鍚嶇О --> - <el-form-item label="搴旂敤鍚嶇О:" prop="applicationName"> - <el-input v-model="myInterface.applicationName" placeholder="濉啓搴旂敤鍚嶇О"></el-input> - </el-form-item> - <!-- 搴旂敤鍥炬爣 --> - <el-form-item label="搴旂敤鍥炬爣:" prop="applicationIconUrl"> - <div class="iconBox"> - <div class="upload"> - <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> - </div> - <div class="iconView"> - <span>绀烘剰鍥�</span> - <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> - </div> - <div class="tip"> - <span>鍙厑璁镐笂浼爅pg,jpeg,png,svg鏍煎紡鐨勫浘鐗囷紝寤鸿灏哄涓�105px*105px</span> - </div> - </div> - </el-form-item> - <!-- 搴旂敤绫诲瀷 --> - <el-form-item label="搴旂敤绫诲瀷:" prop="applicationType"> - <div class="optionItem"> - <el-radio-group v-model="myInterface.applicationType"> - <el-radio :label="1">缃戦〉搴旂敤</el-radio> - </el-radio-group> - </div> - </el-form-item> - <!--缃戠珯url --> - <el-form-item label="缃戠珯url:" prop="websiteUrl"> - <el-input v-model="myInterface.websiteUrl"></el-input> - </el-form-item> - <!-- 搴旂敤鎻忚堪 --> - <el-form-item label="搴旂敤鎻忚堪:" prop="description"> - <el-input v-model="myInterface.description" placeholder="璇峰~鍐欐弿杩�"></el-input> - </el-form-item> - <!-- 鎸夐挳 --> - <el-form-item> - <div class="optionBtn"> - <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 - </el-button> - <el-button class="btn reset">閲嶇疆</el-button> - </div> - </el-form-item> - </el-form> + <div class="createmyInterface"> + <main> + <div class="mainContent"> + <el-form + ref="survey" + label-width="140px" + autoComplete="on" + :model="myInterface" + :rules="createSurvey" + label-position="right" + > + <el-form-item class="optionItem" label="闂绫诲瀷:" prop="type"> + <el-select v-model="myInterface.type" placeholder="璇烽�夋嫨闂绫诲瀷"> + <el-option label="闂绫诲瀷涓�" value="shanghai"></el-option> + <el-option label="闂绫诲瀷浜�" value="beijing"></el-option> + </el-select> + </el-form-item> + <el-form-item class="optionItem" label="澶х被:" prop="bigclass"> + <el-select v-model="myInterface.bigclass" placeholder="璇烽�夋嫨澶х被"> + <el-option label="澶х被涓�" value="shanghai"></el-option> + <el-option label="澶х被浜�" value="beijing"></el-option> + </el-select> + </el-form-item> + <el-form-item class="optionItem" label="灏忕被:" prop="subclass"> + <el-select v-model="myInterface.subclass" placeholder="璇烽�夋嫨灏忕被"> + <el-option label="灏忕被涓�" value="shanghai"></el-option> + <el-option label="灏忕被浜�" value="beijing"></el-option> + </el-select> + </el-form-item> + <el-form-item class="optionItem" label="琛楅亾:" prop="street"> + <el-input + v-model="myInterface.street" + placeholder="璇峰~鍐欒閬�" + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="绀惧尯:" prop="community"> + <el-input + v-model="myInterface.community" + placeholder="璇峰~鍐欑ぞ鍖�" + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="浠诲姟鎻忚堪:" prop="task"> + <el-input + v-model="myInterface.task" + placeholder="璇峰~鍐欎换鍔℃弿杩�" + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="涓婃姤鏃堕棿:" prop="reportTime"> + <div class="block"> + <el-date-picker + v-model="myInterface.reportTime" + type="datetime" + placeholder="閫夋嫨鏃ユ湡鏃堕棿" + > + </el-date-picker> </div> - </main> - </div> + </el-form-item> + <el-form-item> + <div class="optionBtn"> + <el-button class="btn cancel" @click.native.prevent="handleCancel" + >鍙栨秷</el-button + > + <el-button + type="primary" + class="btn submit" + @click.native.prevent="handleSave" + >淇濆瓨 + </el-button> + </div> + </el-form-item> + </el-form> + </div> + </main> + </div> </template> <script> export default { - data() { - const validateApplicationName = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); - } - }; - const validateApplicationIconUrl = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - const rep = /^\w+$/; - if (!rep.test(value)) { - callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆")); - } - } - }; - const validateApplicationType = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰鍚�")); - } else { - const rep = /^[\u4E00-\u9FA5]{2,4}$/; - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - } - } - }; - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); - } else { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - } - } - }; - return { - myInterface: { - }, - createmyInterfaceRules: { - applicationName: [ - { required: true, trigger: "blur", validator: validateApplicationName}, - ], - applicationIconUrl: [ - { required: true, trigger: "blur", validator: validateApplicationIconUrl }, - ], - applicationType: [ - { required: true, trigger: "blur", validator: validateApplicationType }, - ], - websiteUrl: [ - { required: true, trigger: "blur" }, - ], - description: [ - { required: false, trigger: "blur" }, - ], - }, - } + data() { + const validateType = (rule, value, callback) => { + if (!value) { + callback(new Error("璇烽�夋嫨闂绫诲瀷")); + } + }; + const validateBigClass = (rule, value, callback) => { + if (!value) { + callback(new Error("璇烽�夋嫨澶х被")); + } + }; + const validateSubClass = (rule, value, callback) => { + if (!value) { + callback(new Error("璇烽�夋嫨灏忕被")); + } + }; + const validateStreet = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欒閬�")); + } + }; + const validateCommunity = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑ぞ鍖�")); + } + }; + const validateTask = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欎换鍔℃弿杩�")); + } + }; + const validateReportTime = (rule, value, callback) => { + if (!value) { + callback(new Error("璇烽�夋嫨浠诲姟涓婃姤鏃堕棿")); + } + }; + + return { + myInterface: { + num: "", + type: "", + bigclass: "", + subclass: "", + street: "", + community: "", + task: "", + reportTime: "", + }, + createSurvey: { + type: [ + { + required: true, + trigger: "blur", + validator: validateType, + }, + ], + bigclass: [ + { + required: true, + trigger: "blur", + validator: validateBigClass, + }, + ], + subclass: [ + { + required: true, + trigger: "blur", + validator: validateSubClass, + }, + ], + street: [ + { required: true, trigger: "blur", validator: validateStreet }, + ], + community: [ + { required: true, trigger: "blur", validator: validateCommunity }, + ], + task: [{ required: true, trigger: "blur", validator: validateTask }], + reportTime: [ + { required: true, trigger: "blur", validator: validateReportTime }, + ], + }, + }; + }, + created() { + const that = this; + }, + methods: { + // 鍏抽棴寮圭獥 + handleCancel() { + console.log(1); + this.$emit("closeDialog", { flag: false, index: 0 }); }, - created() { - const that = this; + //淇濆瓨 + handleSave() { + const { myInterface } = this; + this.$refs.survey.validate((flag)=>{ + console.log(flag) + if(flag){ + + }else{ + return false + } + }) + // this.$axios + // .post("sccg/system/portal/thirdApp/add", { + // websiteUrl: myInterface.websiteUrl, + // applicationIconUrl: myInterface.applicationIconUrl, + // applicationType: 0, + // description: myInterface.description, + // applicationName: myInterface.applicationName, + // }) + // .then((res) => { + // console.log(res); + // // if (res.code === 200) { + // // this.refresh(); + // // } + // }); }, - methods: { - handleUser() { - const { myInterface } = this; - this.$axios.post('sccg/system/portal/thirdApp/add', { - websiteUrl:myInterface.websiteUrl, - applicationIconUrl:myInterface.applicationIconUrl, - applicationType:0, - description:myInterface.description, - applicationName:myInterface.applicationName - }).then(res => { - console.log(res); - // if (res.code === 200) { - // this.refresh(); - // } - }) - }, - }, - props: ['refresh'] -} + }, + props: ['refresh','closeDialog'], +}; </script> <style lang="scss" scoped> .createmyInterface { - border-radius: 1px; + border-radius: 1px; + background-color: #09152f; + + main { + text-align: left; + padding: 0 55px; background-color: #09152f; + padding-bottom: 50px; + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; - main { - text-align: left; - padding: 0 55px; - background-color: #09152f; - padding-bottom: 50px; - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; - - .iconBox { - display: flex; - - .upload { - display: flex; - align-items: flex-end; - - img { - width: 120px; - height: 120px; - border-radius: 4px; - } - } - - .iconView { - display: flex; - flex-direction: column; - margin-left: 30px; - justify-content: flex-end; - - img { - width: 70px; - height: 70px; - border-radius: 4px; - } - } - - .tip { - display: flex; - align-items: flex-end; - margin-left: 30px; - font-size: 12px; - - span { - line-height: 20px; - } - } - } - .optionBtn{ - margin-top: 30px; - &::v-deep .el-button{ - padding: 12px 40px; - } - .reset{ - border: 1px solid #0079fe; - color: #0079fe; - } - } - &::v-deep .el-form-item__label { - color: #4b9bb7; - } - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } - - .addPerson { - display: flex; - list-style: none; - padding: 0; - - li { - background-color: #cccccc; - width: 36px; - height: 36px; - border-radius: 50%; - color: #fff; - text-align: center; - font-size: 30px; - margin-left: 10px; - } - } - - .el-form-item__content { - width: 400px; - - .el-select { - width: 100%; - } - } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - - } - } - - footer { - border-top: 1px solid #fff; - height: 80px; + .iconBox { display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 20px; + + .upload { + display: flex; + align-items: flex-end; + + img { + width: 120px; + height: 120px; + border-radius: 4px; + } + } + + .iconView { + display: flex; + flex-direction: column; + margin-left: 30px; + justify-content: flex-end; + + img { + width: 70px; + height: 70px; + border-radius: 4px; + } + } + + .tip { + display: flex; + align-items: flex-end; + margin-left: 30px; + font-size: 12px; + + span { + line-height: 20px; + } + } + } + .optionBtn { + margin-top: 30px; + &::v-deep .el-button { + padding: 12px 40px; + } + .reset { + border: 1px solid #0079fe; + color: #0079fe; + } + } + &::v-deep .el-form-item__label { + color: #4b9bb7; + } + + &::v-deep .el-input__inner { + background-color: #09152f; + border: 1px solid #17324c; + } + + .addPerson { + display: flex; + list-style: none; + padding: 0; + + li { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } + } + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } } + } + + footer { + border-top: 1px solid #fff; + height: 80px; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 20px; + } } </style> \ No newline at end of file diff --git a/src/views/operate/rectification/surveyList/components/viewInterface/index.vue b/src/views/operate/rectification/surveyList/components/viewInterface/index.vue index 6b28ebb..286fcf4 100644 --- a/src/views/operate/rectification/surveyList/components/viewInterface/index.vue +++ b/src/views/operate/rectification/surveyList/components/viewInterface/index.vue @@ -1,246 +1,272 @@ <template> - <div class="createmyInterface"> - <main> - <div class="mainContent"> - <el-form ref="user" label-width="140px" autoComplete="on" :model="myInterface" - :rules="createmyInterfaceRules" label-position="right"> - <!-- 搴旂敤鍚嶇О --> - <el-form-item label="搴旂敤鍚嶇О:" prop="applicationName"> - <el-input v-model="myInterface.applicationName" placeholder="濉啓搴旂敤鍚嶇О"></el-input> - </el-form-item> - <!-- 搴旂敤鍥炬爣 --> - <el-form-item label="搴旂敤鍥炬爣:" prop="applicationIconUrl"> - <div class="iconBox"> - <div class="upload"> - <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> - </div> - <div class="iconView"> - <span>绀烘剰鍥�</span> - <img src="@/assets/imgs/user/default-avatar.jpg" alt=""> - </div> - <div class="tip"> - <span>鍙厑璁镐笂浼爅pg,jpeg,png,svg鏍煎紡鐨勫浘鐗囷紝寤鸿灏哄涓�105px*105px</span> - </div> - </div> - </el-form-item> - <!-- 搴旂敤绫诲瀷 --> - <el-form-item label="搴旂敤绫诲瀷:" prop="applicationType"> - <div class="optionItem"> - <el-radio-group v-model="myInterface.applicationType"> - <el-radio :label="1">缃戦〉搴旂敤</el-radio> - </el-radio-group> - </div> - </el-form-item> - <!--缃戠珯url --> - <el-form-item label="缃戠珯url:" prop="websiteUrl"> - <el-input v-model="myInterface.websiteUrl"></el-input> - </el-form-item> - <!-- 搴旂敤鎻忚堪 --> - <el-form-item label="搴旂敤鎻忚堪:" prop="description"> - <el-input v-model="myInterface.description" placeholder="璇峰~鍐欐弿杩�"></el-input> - </el-form-item> - <!-- 鎸夐挳 --> - <!-- <el-form-item> - <div class="optionBtn"> - <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦 - </el-button> - <el-button class="btn reset">閲嶇疆</el-button> - </div> - </el-form-item> --> - </el-form> - </div> - </main> - </div> + <div class="createmyInterface"> + <main> + <div class="mainContent"> + <el-form + ref="user" + label-width="140px" + autoComplete="on" + :model="myInterface" + :rules="createUserRules" + label-position="right" + > + <el-form-item class="optionItem" label="浠诲姟缂栧彿:" prop="num"> + <el-input + v-model="myInterface.num" + placeholder="璇峰~鍐欎换鍔$紪鍙�" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="闂绫诲瀷:" prop="type"> + <el-input + v-model="myInterface.type" + placeholder="璇烽�夋嫨闂绫诲瀷" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="澶х被:" prop="bigclass"> + <el-input + v-model="myInterface.bigclass" + placeholder="璇烽�夋嫨澶х被" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="灏忕被:" prop="subclass"> + <el-input + v-model="myInterface.subclass" + placeholder="璇烽�夋嫨灏忕被" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="琛楅亾:" prop="street"> + <el-input + v-model="myInterface.street" + placeholder="璇峰~鍐欒閬�" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="绀惧尯:" prop="community"> + <el-input + v-model="myInterface.community" + placeholder="璇峰~鍐欑ぞ鍖�" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="浠诲姟鎻忚堪:" prop="task"> + <el-input + v-model="myInterface.task" + placeholder="璇峰~鍐欎换鍔℃弿杩�" + disabled + ></el-input> + </el-form-item> + <el-form-item class="optionItem" label="涓婃姤鏃堕棿:" prop="reportTime"> + <el-input + v-model="myInterface.reportTime" + placeholder="璇烽�夋嫨涓婃姤鏃堕棿" + disabled + ></el-input> + </el-form-item> + </el-form> + </div> + </main> + </div> </template> <script> export default { - data() { - const validateApplicationName = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); - } - }; - const validateApplicationIconUrl = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); - } else { - const rep = /^\w+$/; - if (!rep.test(value)) { - callback(new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆")); - } - } - }; - const validateApplicationType = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欑敤鎴峰鍚�")); - } else { - const rep = /^[\u4E00-\u9FA5]{2,4}$/; - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - } - } - }; - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); - } else { - const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ - if (!rep.test(value)) { - callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); - } - } - }; - return { - myInterface: { - }, - createmyInterfaceRules: { - applicationName: [ - { required: true, trigger: "blur", validator: validateApplicationName}, - ], - applicationIconUrl: [ - { required: true, trigger: "blur", validator: validateApplicationIconUrl }, - ], - applicationType: [ - { required: true, trigger: "blur", validator: validateApplicationType }, - ], - websiteUrl: [ - { required: true, trigger: "blur" }, - ], - description: [ - { required: false, trigger: "blur" }, - ], - }, + data() { + const validateApplicationName = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); + } + }; + const validateApplicationIconUrl = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + const rep = /^\w+$/; + if (!rep.test(value)) { + callback( + new Error("瀵嗙爜鍙兘鏄互鏁板瓧銆�26涓嫳鏂囧瓧姣嶆垨鑰呬笅鍒掔嚎缁勬垚鐨勫瓧绗︿覆") + ); } - }, - created() { - const that = this; - const {userInfo} = this; - this.myInterface = JSON.parse(JSON.stringify(userInfo)); - }, - methods: { - }, - props: ['updateFlag','userInfo'] -} + } + }; + const validateApplicationType = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑敤鎴峰鍚�")); + } else { + const rep = /^[\u4E00-\u9FA5]{2,4}$/; + if (!rep.test(value)) { + callback("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); + } + } + }; + const validatePhone = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); + } else { + const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; + if (!rep.test(value)) { + callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); + } + } + }; + return { + myInterface: {}, + createmyInterfaceRules: { + applicationName: [ + { + required: true, + trigger: "blur", + validator: validateApplicationName, + }, + ], + applicationIconUrl: [ + { + required: true, + trigger: "blur", + validator: validateApplicationIconUrl, + }, + ], + applicationType: [ + { + required: true, + trigger: "blur", + validator: validateApplicationType, + }, + ], + websiteUrl: [{ required: true, trigger: "blur" }], + description: [{ required: false, trigger: "blur" }], + }, + }; + }, + created() { + const that = this; + const { userInfo } = this; + this.myInterface = JSON.parse(JSON.stringify(userInfo)); + }, + methods: {}, + props: ["updateFlag", "userInfo"], +}; </script> <style lang="scss" scoped> .createmyInterface { - border-radius: 1px; + border-radius: 1px; + background-color: #09152f; + + main { + text-align: left; + padding: 0 55px; background-color: #09152f; - main { - text-align: left; - padding: 0 55px; - background-color: #09152f; + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; - - .iconBox { - display: flex; - - .upload { - display: flex; - align-items: flex-end; - - img { - width: 120px; - height: 120px; - border-radius: 4px; - } - } - - .iconView { - display: flex; - flex-direction: column; - margin-left: 30px; - justify-content: flex-end; - - img { - width: 70px; - height: 70px; - border-radius: 4px; - } - } - - .tip { - display: flex; - align-items: flex-end; - margin-left: 30px; - font-size: 12px; - - span { - line-height: 20px; - } - } - } - .optionBtn{ - &::v-deep .el-button{ - padding: 12px 40px; - } - .reset{ - border: 1px solid #0079fe; - color: #0079fe; - } - } - &::v-deep .el-form-item__label { - color: #4b9bb7; - } - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } - - .addPerson { - display: flex; - list-style: none; - padding: 0; - - li { - background-color: #cccccc; - width: 36px; - height: 36px; - border-radius: 50%; - color: #fff; - text-align: center; - font-size: 30px; - margin-left: 10px; - } - } - - .el-form-item__content { - width: 400px; - - .el-select { - width: 100%; - } - } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - - } - } - - footer { - border-top: 1px solid #fff; - height: 80px; + .iconBox { display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 20px; + + .upload { + display: flex; + align-items: flex-end; + + img { + width: 120px; + height: 120px; + border-radius: 4px; + } + } + + .iconView { + display: flex; + flex-direction: column; + margin-left: 30px; + justify-content: flex-end; + + img { + width: 70px; + height: 70px; + border-radius: 4px; + } + } + + .tip { + display: flex; + align-items: flex-end; + margin-left: 30px; + font-size: 12px; + + span { + line-height: 20px; + } + } + } + .optionBtn { + &::v-deep .el-button { + padding: 12px 40px; + } + .reset { + border: 1px solid #0079fe; + color: #0079fe; + } + } + &::v-deep .el-form-item__label { + color: #4b9bb7; + } + + &::v-deep .el-input__inner { + background-color: #09152f; + border: 1px solid #17324c; + } + + .addPerson { + display: flex; + list-style: none; + padding: 0; + + li { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } + } + + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + + .optionHandleSp { + display: flex; + + .areaNumber, + .moreNumber { + flex: 1; + } + + .telNumber { + flex: 2; + } + } } + } + + footer { + border-top: 1px solid #fff; + height: 80px; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 20px; + } } </style> \ No newline at end of file diff --git a/src/views/operate/rectification/surveyList/index.vue b/src/views/operate/rectification/surveyList/index.vue index 085739f..d6c82e8 100644 --- a/src/views/operate/rectification/surveyList/index.vue +++ b/src/views/operate/rectification/surveyList/index.vue @@ -1,290 +1,372 @@ <template> - <div class="otherInterface"> - <header> - <div class="headerTitle">杩愯惀绠$悊 >> 涓撻」鏁存不 > 鏅煡鍒楄〃</div> - </header> - <main> - <div class="mainHeader"> - <div class="add"> - <el-button type="primary" icon="el-icon-plus">鏂板浠诲姟</el-button> - </div> - <div class="date-search"> - <span>鎸夊ぉ鏌ヨ:</span> - <div class="mydate"> - <el-input placeholder="璇疯緭鍏ュ紑濮嬫椂闂�"></el-input> - <div class="line"> - 鈥斺�斺�� 鈥斺�斺�� - </div> - <el-input placeholder="璇疯緭鍏ョ粨鏉熸椂闂�"></el-input> - </div> - </div> - <div class="search"> - <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input> - </div> - <div class="btn"> - <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button> - <el-button icon="el-icon-delete">閲嶇疆</el-button> - </div> - </div> - <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-column> - <el-table-column label="浠诲姟缂栧彿" prop="applicationName" min-width="10"> - </el-table-column> - <el-table-column prop="applicationType" label="闂绫诲瀷" min-width="10"> - </el-table-column> - <el-table-column prop="websiteUrl" 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> - <el-table-column prop="applicationType" 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> - <el-table-column label="鎿嶄綔" min-width="10"> - <template slot-scope="scope"> - <span @click="handleDelete(scope.row)">鏌ョ湅</span> - </template> - </el-table-column> - </el-table> - <!-- 鍒嗛〉 --> - <!-- <div class="pagination"> + <div class="otherInterface"> + <header> + <div class="headerTitle">杩愯惀绠$悊 >> 涓撻」鏁存不 > 鏅煡鍒楄〃</div> + </header> + <main> + <div class="mainHeader"> + <div class="add"> + <el-button type="primary" icon="el-icon-plus" @click="handleAdd()" + >鏂板浠诲姟</el-button + > + </div> + <div class="date-search"> + <span>鎸夊ぉ鏌ヨ:</span> + <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> + <el-input placeholder="璇疯緭鍏ョ粨鏉熸椂闂�"></el-input> + </div> --> + </div> + <div class="search"> + <el-input placeholder="璇疯緭鍏ユ爣棰樻垨鑰呬换鍔$紪鍙�"></el-input> + </div> + <div class="btn"> + <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button> + <el-button icon="el-icon-delete">閲嶇疆</el-button> + </div> + </div> + <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-column> --> + <el-table-column label="浠诲姟缂栧彿" prop="num" min-width="10"> + </el-table-column> + <el-table-column prop="type" label="闂绫诲瀷" min-width="10"> + </el-table-column> + <el-table-column prop="bigclass" label="澶х被" min-width="10"> + </el-table-column> + <el-table-column prop="subclass" label="灏忕被" min-width="10"> + </el-table-column> + <el-table-column prop="street" label="琛楅亾" min-width="10"> + </el-table-column> + <el-table-column prop="community" label="绀惧尯" min-width="10"> + </el-table-column> + <el-table-column prop="task" label="浠诲姟鎻忚堪" min-width="10"> + </el-table-column> + <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="handleView(scope.row)" style="cursor: pointer" + >鏌ョ湅</span + > + </template> + </el-table-column> + </el-table> + <!-- 鍒嗛〉 --> + <!-- <div class="pagination"> <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" @next-click="handleNext"> </el-pagination> </div> --> - </div> - </main> - <footer> - <!-- 鍒涘缓寮圭獥 --> - <el-dialog :visible.sync="dialogCreate" title="鏂板绗笁鏂规帴鍙�" width="45%" v-if="dialogCreate" - :before-close="handleClose"> - <createInterface /> - </el-dialog> - <!-- 鏌ョ湅寮圭獥 --> - <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'淇敼绗笁鏂规帴鍙�':'鏌ョ湅绗笁鏂规帴鍙�'" width="45%" - v-if="dialogUpdate" :before-close="handleClose"> - <viewInterface :updateFlag="updateFlag" :userInfo=userInfo /> - </el-dialog> - </footer> - </div> + </div> + </main> + <footer> + <!-- 鍒涘缓寮圭獥 --> + <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> + </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 - }, - data() { - return { - tableData: [], - search: "", - dialogCreate: false, - dialogUpdate: false, - updateFlag: false, - userInfo: '', - date:'', - // totalNum: 200, - // pageSize: 10, - // currentPage: 1, + components: { + createInterface, + viewInterface, + }, + data() { + return { + 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: "", + beginTime: "", + endTime: "", + // totalNum: 200, + // pageSize: 10, + // currentPage: 1, + }; + }, + created() { + this.getUserList(); + }, + methods: { + // 鑾峰彇鎺ュ彛鍒楄〃 + getUserList() { + const that = this; + // const { currentPage, pageSize, search } = this; + this.dialogCreate = false; + this.$axios.get("sccg/system/portal/thirdApp/search").then((res) => { + const { code, data } = res; + if (code == 200) { + this.tableData = data; } + }); }, - created() { - this.getUserList(); + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 == 0) { + return "warning-row"; + } else { + return "success-row"; + } + return ""; }, - methods: { - // 鑾峰彇鎺ュ彛鍒楄〃 - getUserList() { - const that = this; - // const { currentPage, pageSize, search } = this; - this.dialogCreate = false; - 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'; - } else { - return 'success-row'; - } - return ''; - }, - // 鎵撳紑鏂板鐣岄潰 - handleAdd() { - this.dialogCreate = true; - }, - // 鍒涘缓寮圭獥鍏抽棴 - handleClose(done) { - const that = this; - this.$confirm('纭鍏抽棴锛�') - .then(_ => { - that.dialogCreate = false; - done(); - }) - .catch(_ => { }); - }, - // 鍒涘缓鏌ョ湅寮圭獥 - handleView(rowData) { - this.userInfo = rowData; - this.dialogUpdate = true; - }, - // 鍒犻櫎绗笁鏂规帴鍙� - handleDelete({ id }) { - console.log(id); - this.$axios.delete('sccg/system/portal/thirdApp/delete', { - params: { - id - } - }).then(res => { - console.log(res); - }) - } - // // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - // changeCurrentPage(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - // // 涓婁竴椤电偣鍑讳簨浠� - // handlePrev(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - // // 涓嬩竴椤电偣鍑讳簨浠� - // handleNext(page) { - // this.currentPage = page; - // this.getUserList(); - // }, - } -} + // 鎵撳紑鏂板鐣岄潰 + handleAdd() { + this.dialogCreate = true; + }, + // 鍒涘缓寮圭獥鍏抽棴 + handleClose(done) { + const that = this; + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + that.dialogCreate = false; + done(); + }) + .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", { + params: { + id, + }, + }) + .then((res) => { + console.log(res); + }); + }, + // // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + // changeCurrentPage(page) { + // this.currentPage = page; + // this.getUserList(); + // }, + // // 涓婁竴椤电偣鍑讳簨浠� + // handlePrev(page) { + // this.currentPage = page; + // this.getUserList(); + // }, + // // 涓嬩竴椤电偣鍑讳簨浠� + // handleNext(page) { + // this.currentPage = page; + // this.getUserList(); + // }, + }, +}; </script> <!-- sccg/system/portal/thirdApp/search --> <style lang="scss" scoped> .otherInterface { - header { + header { + display: flex; + line-height: 60px; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + &::v-deep .el-button { + background-color: #eb5d01; + border: none; + color: #fff; + border-radius: 20px; + } + } + + main { + padding: 10px 20px; + + .mainHeader { + padding-left: 20px; + display: flex; + line-height: 60px; + color: #4b9bb7; + background-color: #09152f; + display: flex; + .add, + .search, + .btn { + flex: 1; + } + .date-search { + flex: 3; display: flex; - line-height: 60px; - justify-content: space-between; - padding: 0 20px; + .mydate { + display: flex; + .line { + margin: 0 10px 0 20px; + } + } + } + .el-input { + width: 180px; + height: 35px; + margin-left: 10px; + + &::v-deep .el-input__inner { + background-color: #09152f; + border: 1px solid #17324c; + font-size: 12px; + } + } + } + + .mainContent { + margin-top: 20px; + + .el-table { color: #4b9bb7; - &::v-deep .el-button { - background-color: #eb5d01; - border: none; - color: #fff; - border-radius: 20px; + &::v-deep .el-table__empty-block { + background-color: #06122c; } + + &::v-deep .el-table__empty-text { + color: #4b9bb7; + } + + &::v-deep .warning-row { + background-color: #06122c; + } + + &::v-deep .success-row { + background-color: #071f39; + } + } + + .line { + padding: 0 5px; + // margin-top: -10px; + } + } + } + + footer { + &::v-deep .el-dialog__header, + &::v-deep .el-dialog__body { + background-color: #06122c; } - main { - padding: 10px 20px; - - .mainHeader { - padding-left: 20px; - display: flex; - line-height: 60px; - color: #4b9bb7; - background-color: #09152f; - display: flex; - .add,.search,.btn{ - flex:1; - } - .date-search{ - flex: 3; - display: flex; - .mydate{ - display: flex; - .line{ - margin:0 10px 0 20px; - } - } - } - .el-input { - width: 180px; - height: 35px; - margin-left: 10px; - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - font-size: 12px; - } - } - } - - .mainContent { - margin-top: 20px; - - .el-table { - color: #4b9bb7; - - &::v-deep .el-table__empty-block { - background-color: #06122c; - } - - &::v-deep .el-table__empty-text { - color: #4b9bb7; - } - - &::v-deep .warning-row { - background-color: #06122c; - } - - &::v-deep .success-row { - background-color: #071f39; - } - } - - .line { - padding: 0 5px; - // margin-top: -10px; - } - } + &::v-deep .el-dialog__header { + display: flex; + align-items: center; + background-color: #fff; + padding: 20px; + line-height: 60px; } - footer { - - &::v-deep .el-dialog__header, - &::v-deep .el-dialog__body { - background-color: #06122c; - } - - &::v-deep .el-dialog__header { - display: flex; - align-items: center; - background-color: #fff; - padding: 20px; - line-height: 60px; - } - - &::v-deep .el-dialog__title { - color: #4b9bb7; - } - - &::v-deep .el-dialog__close { - width: 20px; - height: 20px; - // color: #fff; - } - - &::v-deep .el-dialog__body { - padding: 0; - } + &::v-deep .el-dialog__title { + color: #4b9bb7; } + + &::v-deep .el-dialog__close { + width: 20px; + height: 20px; + // color: #fff; + } + + &::v-deep .el-dialog__body { + padding: 0; + } + } } </style> \ No newline at end of file -- Gitblit v1.8.0