问答大致界面、文件管理

src/views/als/fileManage/index.vue

@@ -1,17 +1,295 @@
 <template>
-  <div class="view-fileManage">文件管理</div>
+  <div class="view-table-content">
+    <div style="width: 100%">
+      <div class="view-dataType-title">
+        <div class="view-dataType-title-btn">
+          <el-button type="success">文件上传</el-button>
+          <el-button type="warning" @click="remove(tableCheckItems)" :disabled="tableCheckItems.length == 0">删除</el-button>
+        </div>
+        <div class="view-dataType-title-search">
+          <el-input placeholder="请输入名称" v-model="keyWordData" class="input1">
+            <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
+          </el-input>
+        </div>
+      </div>
+      <div class="view-dataType-table">
+        <LTable ref="table" @selection-change="selection" :defaultFetch="false" :fetch="fetch" :columns="columns" :dataSource="tableData" :options="options" :pagination="tableRequset"></LTable>
+      </div>
+      <!-- 添加或修改模型信息对话框 -->
+      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="模型名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入模型名称" />
+          </el-form-item>
+          <el-form-item label="模型类型" prop="type">
+            <el-select v-model="form.type" placeholder="请选择模型类型">
+              <el-option v-for="item in $enumData.agloModelList" :key="item.key" :label="item.name" :value="item.key" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="模型链接" prop="url">
+            <el-input v-model="form.url" placeholder="请输入模型链接" />
+          </el-form-item>
+          <el-form-item label="参数" prop="param">
+            <el-input type="textarea" :rows="2" v-model="form.param" placeholder="请输入参数" />
+          </el-form-item>
+          <el-form-item label="数据列" prop="columnData">
+            <el-input type="textarea" :rows="3" v-model="form.columnData" placeholder="请输入数据列" />
+          </el-form-item>
+          <el-form-item v-if="dialogTitle === '编辑'" label="状态" prop="status">
+            <el-switch v-model="form.status" active-color="#13ce66" active-value="1" inactive-value="0"> </el-switch>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" :rows="2" v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="submit">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
 </template>
 
 <script>
+import { getModel, addModel, updateModel, removeModel } from '@/api/als/model'
+import { deepClone, debounce } from '@/utils/index'
+import { agloModelList } from '@/views/als/utils/enum-data'
 export default {
-  name: 'FileManage',
+  name: 'Model',
+  components: {},
   data() {
-    return {}
+    // 这里存放数据
+    return {
+      dialogTitle: '新增',
+      dialogVisible: false,
+      keyWordData: '',
+      aircaftModelIdList: [],
+      searchValue: '',
+      columns: [
+        {
+          prop: 'name',
+          label: '文件名称'
+        },
+        {
+          prop: 'url',
+          label: 'Url'
+        },
+        {
+          prop: 'status',
+          label: '状态',
+          render: (h, params) => {
+            if (params.row.status == 0) {
+              return h('span', { class: 'warning-state' }, '禁用')
+            } else {
+              return h('span', { class: 'success-state' }, '启用')
+            }
+          }
+        },
+        {
+          prop: 'remark',
+          label: '备注'
+        },
+        {
+          button: true,
+          label: '操作',
+          width: '240px',
+          group: [
+            {
+              name: '编辑',
+              type: 'text',
+              round: false,
+              plain: false,
+              onClick: (row, index, scope) => {
+                this.handUpdate(row)
+              }
+            },
+            {
+              name: '删除',
+              type: 'text',
+              round: false,
+              plain: false,
+              onClick: (row, index, scope) => {
+                this.remove([row])
+              }
+            }
+          ]
+        }
+      ],
+      options: {
+        stripe: true, // 斑马纹
+        mutiSelect: true, // 多选框
+        index: false, // 显示序号， 多选则 mutiSelect
+        loading: false, // 表格动画
+        initTable: false, // 是否一挂载就加载数据
+        border: true,
+        height: 'calc(100vh - 300px)'
+      },
+      tableCheckItems: [],
+      tableData: [],
+      tableRequset: {
+        total: 0,
+        pageIndex: 1,
+        pageSize: 10,
+        searchValue: ''
+      },
+      form: {
+        id: '',
+        name: '',
+        type: '',
+        url: '',
+        param: '',
+        columnData: '',
+        status: '',
+        remark: '',
+        tenantId: '',
+        version: '',
+        delFlag: '',
+        createBy: '',
+        createTime: '',
+        updateBy: '',
+        updateTime: ''
+      },
+      debounceFn: debounce(this.fetch, 500)
+    }
+  },
+  watch: {
+    keyWord() {
+      this.tableRequset.pageIndex = 1
+      this.debounceFn()
+    }
   },
-  watch: {},
-  created() {},
-  methods: {}
+  mounted() {
+    // this.getModelAPI()
+  },
+  methods: {
+    async removeModelAPI(params) {
+      try {
+        const { code } = await removeModel(params)
+        if (code === 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+          await this.getModelAPI()
+          this.handleClose()
+        }
+      } catch (error) {}
+    },
+
+    async getModelAPI(params) {
+      if (this.$refs.table) this.$refs.table.clearSelection()
+      const { keyWord } = this
+      const { pageSize, pageIndex } = this.tableRequset
+      const {
+        data: { list, total }
+      } = await getModel({ pageSize, pageNum: pageIndex, ...params })
+      this.tableData = list
+      this.tableRequset.total = total
+    },
+
+    fetch() {
+      this.getModelAPI()
+    },
+
+    async searchClick() {
+      this.getModelAPI({ name: keyWordData })
+    },
+
+    async addModelAPI() {
+      try {
+        delete this.form.aircaftModelName
+        const { code } = await addModel({ ...this.form })
+        if (code === 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+          this.handleClose()
+          this.getModelAPI()
+        }
+      } catch (error) {}
+    },
+
+    async updateModelAPI() {
+      try {
+        const { code } = await updateModel({ ...this.form })
+        if (code === 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+          this.handleClose()
+          this.getModelAPI()
+        }
+      } catch (error) {}
+    },
+
+    openDialog() {
+      this.dialogTitle = '新增'
+      this.dialogVisible = true
+    },
+
+    handleClose() {
+      this.dialogVisible = false
+      this.form = {
+        id: '',
+        name: '',
+        type: '',
+        url: '',
+        param: '',
+        columnData: '',
+        status: '',
+        remark: '',
+        tenantId: '',
+        version: '',
+        delFlag: '',
+        createBy: '',
+        createTime: '',
+        updateBy: '',
+        updateTime: ''
+      }
+    },
+
+    handUpdate(row) {
+      this.dialogTitle = '编辑'
+      this.form = deepClone(row)
+      this.dialogVisible = true
+    },
+
+    submit() {
+      switch (this.dialogTitle) {
+        case '编辑':
+          this.updateModelAPI()
+
+          break
+        case '新增':
+          this.addModelAPI()
+
+          break
+      }
+    },
+
+    selection(val) {
+      this.tableCheckItems = val
+    },
+
+    remove(row) {
+      this.$confirm('是否删除该模型', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.removeModelAPI(row.map((e) => e.id))
+        })
+        .catch(() => {})
+    }
+  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+@import '../index.scss';
+</style>

src/views/als/intelligentQA/index.scss

@@ -0,0 +1,77 @@
+.intelligentQA{
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 160px);
+  
+}
+
+.aside{
+  background-color: #11536771;
+  border: 1px solid #209cc1;
+  width: 250px;
+  height: calc(100vh - 200px);
+  color: #fff;
+  text-align: center;
+  line-height: 200px;
+}
+
+.chat{
+  flex: 1;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+
+  .header{
+    height: 60px;
+    line-height: 60px;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    background-color: #f8eaea9b;
+  }
+
+  .main{
+    flex: 1;
+    // background-color: #f8f8fc4c;
+  }
+
+  .footer{
+    width: 100%;
+    text-align: center;
+
+    .footerContent{
+      width: 60%;
+      margin: auto;
+      position: relative;
+
+      textarea {
+        width: 100%;
+        min-height: 50px;
+        max-height: 200px;
+        padding: 15px;
+        box-sizing: border-box;
+        border: 1px solid #209cc1;
+        border-radius: 4px;
+        color: #fff !important;
+        background-color: #11536771;
+        font-size: 14px;
+        resize: none; /* 禁止用户手动调整大小 */
+        overflow: hidden; /* 隐藏溢出内容 */
+        transition: height 0.2s ease; /* 平滑过渡效果 */
+      }
+  
+      .icon{
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        font-size: 1.5rem;
+        color: #fff;
+      }
+    }
+    
+  }
+}
+

src/views/als/intelligentQA/index.vue

@@ -1,17 +1,74 @@
 <template>
-  <div class="view-intelligentQA">智能问答</div>
+  <div class="intelligentQA">
+    <div class="aside">历史记录</div>
+    <div class="chat">
+      <!-- <div class="header">Header</div> -->
+      <div class="main">
+        <div v-for="(item, index) in chatInfo" :key="index">
+          <div class="chatRow" v-if="item.type === 'HMC'"></div>
+          <div class="chatRow" v-if="item.type === 'QA'"></div>
+          <div class="chatRow chatQ" v-if="item.type === 'question'">
+            <div class="questionContent">{{ item.data }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="footerContent">
+          <textarea v-model="questionInput" @input="adjustHeight" :style="{ height: `${currentHeight}px` }" placeholder="请输入您的问题..."> </textarea>
+          <i class="el-icon-delete icon"></i>
+        </div>
+
+        <!-- :rows="3" type="textarea" -->
+        <!-- <el-input ref="textareaRef" v-model="questionInput" class="textarea" @input="adjustHeight" @keyup.enter.native="sendQuestion()" placeholder="请输入问题" suffix-icon="el-icon-date" :style="{ height: `${currentHeight}px` }"> </el-input> -->
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'IntelligentQA',
   data() {
-    return {}
+    return {
+      chatInfo: [],
+      questionInput: '',
+      currentHeight: 'auto',
+      lastScrollHeight: null
+    }
+  },
+  mounted() {
+    this.adjustHeight()
   },
   watch: {},
   created() {},
-  methods: {}
+  methods: {
+    adjustHeight() {
+      const textarea = this.$el.querySelector('textarea')
+      this.currentHeight = 'auto'
+      if (textarea.scrollHeight <= this.lastScrollHeight) {
+        this.lastScrollHeight = this.lastScrollHeight - 16
+      }
+      this.$nextTick(() => {
+        this.currentHeight = Math.min(this.lastScrollHeight, 200)
+        this.lastScrollHeight = textarea.scrollHeight
+      })
+    },
+    sendQuestion() {
+      console.log('222', this.questionInput.trim())
+      if (this.questionInput.trim() === '') {
+        return
+      }
+      this.chatInfo.push({
+        data: this.questionInput,
+        type: 'question'
+        // time: '当前时间'
+      })
+      this.questionInput = ''
+    }
+  }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+@import './index.scss';
+</style>