From 6691c4cf8843766888a24383e850821a02eedde6 Mon Sep 17 00:00:00 2001
From: zhaomeijing <zhaomeijing@syxysoft.com>
Date: Thu, 5 May 2022 18:37:29 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20=E8=AE=A4=E8=AF=81=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E6=94=B6=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dialog/ParameterTemplate.vue              | 397 +++++++++++++++---
 1 file changed, 343 insertions(+), 54 deletions(-)

diff --git a/jero-web/src/views/projectManagement/dialog/ParameterTemplate.vue b/jero-web/src/views/projectManagement/dialog/ParameterTemplate.vue
index ce94478f4..227e4e6b7 100644
--- a/jero-web/src/views/projectManagement/dialog/ParameterTemplate.vue
+++ b/jero-web/src/views/projectManagement/dialog/ParameterTemplate.vue
@@ -1,61 +1,350 @@
 <template>
-  <a-spin :spinning="spinLoading">
-    <a-form-model
-      class="tag-module"
-      ref="ruleForm"
-      :model="form"
-      :rules="rules"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-    >
-      <a-form-model-item :label="$t('Module')" prop="isModel">
-<!--        <j-dict-select-tag type="list" v-model="form.isModel" dictCode="module" :placeholder="$t('PleaseSelectModule')" />-->
-      </a-form-model-item>
-      <a-form-model-item ref="showArea" :label="$t('DisplayArea')" prop="showArea">
-<!--        <a-input-->
-<!--          v-model="form.showArea"-->
-<!--          @blur="-->
-<!--          () => {-->
-<!--            $refs.showArea.onFieldBlur();-->
-<!--          }-->
-<!--        "-->
-<!--        />-->
-      </a-form-model-item>
-      <a-form-model-item ref="enName" :label="$t('enName')" prop="enName">
-<!--        <a-input
-          v-model="form.enName"
-          @blur="
+  <div class="diolag-area">
+    <div class="table-operator">
+      <div class="operator-text">
+        {{$t('parameterTemplate')}}
+      </div>
+    </div>
+      <a-spin :spinning="spinLoading">
+        <a-form-model
+          class="tag-module"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+        >
+          <a-form-model-item :label="$t('Module')" prop="isModel">
+            <j-dict-select-tag type="list" v-model="form.isModel" dictCode="module" :placeholder="$t('PleaseSelectModule')" />
+          </a-form-model-item>
+          <a-form-model-item ref="showArea" :label="$t('DisplayArea')" prop="showArea">
+            <a-input
+              v-model="form.showArea"
+              @blur="
+          () => {
+            $refs.showArea.onFieldBlur();
+          }
+        "
+            />
+          </a-form-model-item>
+          <a-form-model-item ref="enName" :label="$t('enName')" prop="enName">
+            <a-input
+              v-model="form.enName"
+              @blur="
           () => {
             $refs.enName.onFieldBlur();
           }
         "
-        />-->
-      </a-form-model-item>
-      <a-form-model-item ref="sort" :label="$t('SortNumber')" prop="sort">
-<!--                  <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="100" />-->
-<!--        <a-input-number-->
-<!--          style="width:100%"-->
-<!--          v-model="form.sort"-->
-<!--          :min="1"-->
-<!--          :formatter="limitNumber"-->
-<!--          :parser="limitNumber"-->
-<!--          @blur="-->
-<!--          () => {-->
-<!--            $refs.sort.onFieldBlur();-->
-<!--          }-->
-<!--        "-->
-<!--        />-->
-      </a-form-model-item>
-    </a-form-model>
-  </a-spin>
+            />
+          </a-form-model-item>
+          <a-form-model-item ref="sort" :label="$t('SortNumber')" prop="sort">
+            <a-input-number
+              style="width:100%"
+              v-model="form.sort"
+              :min="1"
+              :formatter="limitNumber"
+              :parser="limitNumber"
+              @blur="
+          () => {
+            $refs.sort.onFieldBlur();
+          }
+        "
+            />
+          </a-form-model-item>
+        </a-form-model>
+      </a-spin>
+    <a-table
+      class="table-area"
+      ref="table"
+      size="middle"
+      rowKey="id"
+      :columns="columns"
+      :dataSource="areaTable"
+      :pagination="false"
+      :loading="loading"
+      :scroll="{x: 600}"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+      @change="handleTableChange">
+      <a slot="name" slot-scope="text">{{ text }}</a>
+      <span slot="action" slot-scope="text, record">
+          <a class="action-edit" @click="editArea(record.id)" v-has="'area:edit'" >{{$t('edit')}}</a>
+          <a style="color:red" href="javascript:;" @click=" deleteArea(record.id)"  v-has="'area:delete'">{{$t('delete')}}</a>
+      </span>
+    </a-table>
+  </div>
 </template>
+
 <script>
- export default {
-   name: 'ParameterTemplate',
-   data() {
-     return {
-       spinLoading: false
-     }
-   }
- }
-</script>
\ No newline at end of file
+import { putAction,postAction,getAction,deleteAction } from '@/api/manage'
+export default {
+  name: 'diolagArea',
+  components:{
+
+  },
+  data(){
+    return{
+      title:this.$t('add'),
+      queryParams:{
+        pageNo:1,
+        pageSize:10
+      },
+      total:0,
+      selectedRowKeys: [],
+      loading: false,
+      ipagination:true,
+      editId:'',
+      columns: [
+        {
+          title: this.$t('zoneOfApplication'),
+          dataIndex: 'showArea',
+          key: 'showArea',
+          align: "center",
+          ellipsis: true,
+        },
+        {
+          title: this.$t('parameterTemplate'),
+          align: "center",
+          dataIndex: 'enName',
+          ellipsis: true,
+        }
+      ],
+      newVisible:false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 },
+      },
+      form: {
+        isModel:'1',
+        showArea:'',
+        enName:'',
+        sort:''
+      },
+      rules: {
+        isModel:[
+          { required: true, message: this.$t('PleaseSelectModule'), trigger: 'change' },
+
+        ],
+        enName:[
+          { max: 100, message: this.$t('CannotExceed100characters'), trigger: 'blur' },
+
+        ],
+        showArea:[
+          { required: true, message: this.$t('enterDisplayArea'), trigger: 'blur' },
+          { min:1, max: 50, message: this.$t('charactersLength'), trigger: 'blur' },
+        ],
+        sort:[
+          { required: true, message: this.$t('enterSortingNumber'), trigger: 'change' },
+        ]
+      },
+      areaTable:[],
+      flag:false,  //表单提交标识
+      spinLoading:false,
+    }
+  },
+  props:{
+    // areaTable:Array
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods:{
+    loadData(){
+      this.loading=true
+      let params={
+        ...this.queryParams
+      }
+      postAction(`tag/onlCgformArea/page`,params).then(res=>{
+        if(res.success){
+          this.areaTable=[...res.result.records]
+          this.total=res.result.total
+        }
+      }).finally(()=>{
+        this.loading=false
+      })
+    },
+    onSelectChange(selectedRowKeys) {
+      // console.log('selectedRowKeys changed: ', selectedRowKeys);
+      this.selectedRowKeys = selectedRowKeys;
+    },
+    handleTableChange(){
+
+    },
+    showModal() {
+      this.title=this.$t('add')
+      this.newVisible = true;
+      this.form={
+
+      }
+    },
+    //新增
+    hideModal() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.flag=true
+          this.spinLoading=true
+          //编辑
+          if(this.form.id){
+            putAction(`tag/onlCgformArea/edit`,this.form).then((res)=>{
+              if(res.success){
+                this.$message.success(this.$t('OperationSuccessful'));
+                this.loadData()
+                this.form={
+                  isModel:'',
+                  showArea:'',
+                  enName:'',
+                  sort:''
+                }
+              }else{
+                this.$message.warning(res.message)
+                this.form={
+                  isModel:'',
+                  showArea:'',
+                  enName:'',
+                  sort:''
+                }
+              }
+            }).finally(()=>{
+              this.flag=false
+              this.spinLoading=false
+              this.newVisible = false;
+              this.form={
+                isModel:'',
+                showArea:'',
+                enName:'',
+                sort:''
+              }
+            })
+          }else{
+            //新增
+            postAction(`/tag/onlCgformArea/add`,this.form).then(res=>{
+                if(res.success){
+                  this.$message.success( this.$t('OperationSuccessful'));
+                  this.loadData()
+                  this.form={
+                    isModel:'',
+                    showArea:'',
+                    enName:'',
+                    sort:''
+                  }
+                }else{
+                  // this.$message.warning(this.$t('operationFailed'))
+                  this.$message.warning(res.message)
+
+                }
+              }
+            ).finally(()=>{
+              this.flag=false
+              this.spinLoading=false
+              this.newVisible = false;
+            })
+          }
+
+        } else {
+          // console.log('error submit!!');
+          return false;
+        }
+      });
+
+    },
+    cancelModel(){
+      this.newVisible=false
+      this.$refs.ruleForm.resetFields();
+    },
+    //删除按钮
+    deleteArea(val){
+      this.$confirm({
+        title: this.$t('confirmDeletion'),
+        content: '',
+        onOk:
+          async () => {
+            getAction(`tag/onlCgformArea/delete`, { id: val }).then((res) => {
+              if (res.success) {
+                this.$message.success(this.$t('OperationSuccessful'));
+                if(this.areaTable.length==1&&this.queryParams.pageNo!=1){
+                  this.queryParams.pageNo=this.queryParams.pageNo-1
+                }
+                this.loadData()
+              }else{
+                // this.$message.warning(res.message)
+                if(res.message=='该展示区域有关联数据，无法删除！'){
+                  this.$message.warning(this.$t('noDelete'))
+                }else{
+                  this.$message.warning(this.$t('operationFailed'));
+                }
+              }
+            })
+          }
+      })
+    },
+    //编辑按钮
+    editArea(val){
+      this.title=this.$t('edit')
+      this.newVisible = true;
+      let params={
+        id:val
+      }
+      getAction(`tag/onlCgformArea/queryById`, params).then((res) => {
+        if(res.success){
+          this.form={...res.result}
+          // this.$emit('updateOk',res.result)
+
+        }
+      })
+    },
+    //点击页数
+    onChangePage(page,pageSize){
+      this.queryParams.pageNo = page
+      this.loadData()
+    },
+    //一页显示条数
+    SizeChange(page,pageSize){
+      this.queryParams.pageSize = pageSize
+      this.queryParams.pageNo=1
+      this.loadData()
+    },
+    //正则替换小数点
+    limitNumber(value) {
+      if (typeof value === 'string') {
+        return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
+      } else if (typeof value === 'number') {
+        return !isNaN(value) ? String(value).replace(/\./g, '') : 0
+      } else {
+        return 0
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+.diolag-area{
+  .table-area{
+    margin: 20px 0;
+    .action-edit{
+      margin-right: 10px;
+    }
+  }
+  .table-del{
+    color: red;
+  }
+}
+
+</style>
+<style lang="less">
+.area-module{
+  .ant-modal-wrap{
+    .ant-modal{
+      .ant-modal-content{
+        .ant-modal-footer{
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file